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

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

Answer 2

Start an SVG animation:

Without javascript, using the "event-value" type of the begin attribute="id.event" (without an "on" prefix) on an animation element; or

<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">   <rect x="10" y="10" width="100" height="100">     <animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" />   </rect> </svg>  <button id="go">Go</button> 

(W3C 2018, "SVG Animations Level 2, Editor’s Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "event-value" value type, https://svgwg.org/specs/animations/#TimingAttributes

From javascript, by setting an animation element's begin attribute to "indefinite"; and calling beginElement() from script;

function go () {   var elements = document.getElementsByTagName("animate");   for (var i = 0; i < elements.length; i++) {     elements[i].beginElement();   } }  <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">   <rect x="10" y="10" width="100" height="100">     <!-- begin="indefinite" allows us to start the animation from script -->     <animate attributeName="x" begin="indefinite" dur="2s" from="10" to="300" fill="freeze" />   </rect> </svg>  <button onclick="go();">Go</button> 

(W3C 2018, "SVG Animations Level 2, Editor’s Draft", https://svgwg.org/specs/animations/), " Attributes to control the timing of the animation", "begin" attribute, "indefinite" value type, https://svgwg.org/specs/animations/#TimingAttributes