javascript - SVG trigger animation with event

Question

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).

question from:https://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event

Answer 1

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:

• https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html
• http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques

In short:

1. 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.

2. 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);