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).
-
+1 for a great question; I had been wondering the same thing for a separate question. Now that I know how to kick off SVG animation on demand I can improve that answer. :)– PhrogzDec 10, 2011 at 18:25
2 Answers
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:
Create the
<animation>
withbegin="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 theSVGAnimationElement
instance (the<animate>
element) when you're ready for the animation to start. For your use case, use a standardaddEventListener()
callback to invoke this method when you're ready, e.g.myAnimationElement.addEventListener('mySpecialEvent',function(){ myAnimationElement.beginElement(); },false);
-
4
-
Unfortunately, doesn't work on IE: "Object doesn't support property or method 'beginElement'"– StarwaveApr 2, 2015 at 13:14
-
6@Starwave Very little works in IE. This is an unfortunate fact of web development.– PhrogzApr 2, 2015 at 13:47
-
@Phrogz the first link in answer is dead. Maybe it can be replaced by this one w3.org/TR/SVG/interact.html#SVGEvents ?– web-tikiMay 9, 2015 at 7:11
-
What are we going to use now that SVG animations are not longer supported?– PersijnApr 20, 2016 at 10:30
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