HTML5 - SVG interactive animation example
Look at the source code. Click on the "go" button
Animation start/end
This example was strongly inspired from http://granite.sru.edu/~ddailey/svg/animstart0.svg, documented in the Building Web Applications with SVG, by David Dailey, Jon Frost and Domencio Strazzullo, Publisher: Microsoft Press, Building Web Applications with SVG, by David Dailey, Jon Frost and Domencio Strazzullo, Publisher: Microsoft Press. Drawings should be centered around 0/0, else it will become very difficult !
The animation path>
The ball animation
Ball should be made invisible, then moved to start before animation or something like that
The woman animation
The graphic for the woman is loaded through the SVG image element. Instead of inserting the animation elements within the image element, we refer to the "woman" element using a link. Animation starts 1 second after user clicks on the button. See "Button.click+1s".
This defines a simple button
GO
More information:
Interactive SVG-SMIL animation tutorial