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