how do I trigger an svg animate element to begin animating via javascript with an arbitrary event ? I'm imagining something like begin=mySpecialEvent, then later I can send mySpecialEvent and the animation will start (or start again if it has already played).
Here's an article that covers what you need:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
Edit: link is removed. Archived copies:
In short:
Create the <animation> with begin=indefinite so that it won't treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source.
Call beginElement() on the SVGAnimationElement instance (the <animate> element) when you're ready for the animation to start. For your use case, use a standard addEventListener() callback to invoke this method when you're ready, e.g.
myAnimationElement.addEventListener('mySpecialEvent',function(){
myAnimationElement.beginElement();
},false);
