Interactive SVG animation

And finally, we conclude with one example in which a series of animations is triggered by a the click of a user's mouse button. Try clicking on the GO button below. It should be working in FF4, Safari, Chrome, IE/ASV and Opera.
Here's the link.

 <g>

<desc>A basic path with two peaks and a
trough defined and then twice reused</desc>

<path id="curve" stroke="black" fill="inherit"
stroke-width="3" fill-opacity=".5" 

d="M 0,100

C 50,100 50,50, 100,50 C 150,50 150,150
200,150

C 250,150 250,50, 300,50 C 350,50 350,100
400,100"

/>

<use xlink:href="#curve"
transform="translate(0,20)" fill="cyan"/>

<use xlink:href="#curve"
transform="translate(0,-20)" fill="blue"/>

</g>



<ellipse id="One" cx="0" cy="0" rx="16" ry="8" fill="orange"
opacity=".85" 

stroke="black" stroke-width="2">

<desc>An ellipse with animation to
follow the above path</desc>

<animateMotion id="AM" dur="3s" rotate="auto"
repeatCount="2" begin="G.click+3">

<desc>The animation will
start 3 seconds after the "go" button is pushed</desc>

<mpath xlink:href="#curve"/>

</animateMotion>

</ellipse>



<g id="G">

<desc>A "go" button consisting off an
ellipse and a word. The ellipse changes

colors when the mouse enters and
leaves</desc>

<set attributeName="opacity" to="0"
begin="G.click" />

<set attributeName="opacity" to="1"
begin="AM.end" />

<ellipse cx="205" cy="30" rx="33" ry="15"
fill="yellow"

stroke="black" stroke-width="2">

<set attributeName="fill"
to="green" begin="G.mouseover" />

<set attributeName="fill"
to="yellow" begin="G.mouseout" />

</ellipse>

<text x="180" y="41" font-size="31"
fill="black" font-family="arial" >GO</text>

</g>



<g>

<desc>A series of text objects that
count down from 3 to 1. Each becomes visible for a second

and then disappears.</desc>

<text x="180" y="40" font-size="35"
fill="black" font-family="arial" display="none">

<set attributeName="display"
to="block" begin="G.click" />

<set attributeName="display"
to="none" begin="G.click+1" />

-3</text>

<text x="180" y="40" font-size="35"
fill="black" font-family="arial" display="none">

<set attributeName="display"
to="block" begin="G.click+1" />

<set attributeName="display"
to="none" begin="G.click+2" />

-2</text>

<text x="180" y="40" font-size="35"
fill="black" font-family="arial" display="none">

<set attributeName="display"
to="block" begin="G.click+2" />

<set attributeName="display"
to="none" begin="G.click+3" />

-1</text>

</g> 

Though rather complex, this example shows how we may use events and timers to trigger animations. In this case several things happen:

the "GO" button responds to mouseover and mouseout events by turning colors.
when the "GO" button is clicked, it disappears and a countdown begins with the numbers 3, 2, and then 1 becoming visible for a second apiece
when the countdown is done (three seconds after it begins) the ellipse (named "One") begins to traverse the path, since its< animateMotion> tag "AM" is activated.
After the ellipse finishes two iterations of its traversal of the path (repeatCount="2") then that is used to allow the "GO" button to reappear.

Clearly all of this could be done through script, and some of it could be done with CSS. In fact the changing of the numbers in this way is much less efficient than a scripted solution. But it illustrates some of the power and convenience of declarative animation, since all this is done without "programming" in the classical sense.