svg: activate/deactivate animations

Question

Short question: is there a way to activate/deactivate SVG <animate> elements, so that only one applies for a given graphical object at a given time?

I have an svg document (<svg></svg>) inlined in a html document. There is one graphical object in the svg, e.g. a circle, and two <animate> elements defined when mouse hovers over the circle. These two animations are unrelated, they implement different animations for the same circle, only one <animate> should be active at a given time. I would like to toggle between the two <animate> elements, so I need to deactivate the current active <animate> and activate the other. How can I do that?

Answer 1

You could structure your animations like this:

<circle id="c1" .../>
<animate xlink:href="#c1"/>
<animate xlink:href="#c2"/>

If you change the id of the circle from c1 to c2 then the second animation will apply instead of the first.