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

+1 for a great question; I had been wondering the same thing for [a separate question](http://stackoverflow.com/questions/8438830/move-a-div-in-a-curved-path-like-tweening-in-flash-old-days/8439107#8439107). Now that I know how to kick off SVG animation on demand I can improve that answer. :) — Phrogz, Dec 10 '11 at 18:25

Phrogz · Accepted Answer · 2015-05-11T15:30:56.970

74

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

edited May 11 '15 at 15:30

answered Dec 10 '11 at 18:24

Phrogz

296,393
112
651
745

4

Great. In fact, simply calling `beginElement()` also made the job. – Mike Aski Sep 14 '12 at 05:53
Unfortunately, doesn't work on IE: "Object doesn't support property or method 'beginElement'" – Starwave Apr 02 '15 at 13:14
7

@Starwave Very little works in IE. This is an unfortunate fact of web development. – Phrogz Apr 02 '15 at 13:47
@Phrogz the first link in answer is dead. Maybe it can be replaced by this one http://www.w3.org/TR/SVG/interact.html#SVGEvents ? – web-tiki May 09 '15 at 07:11
What are we going to use now that SVG animations are not longer supported? – Persijn Apr 20 '16 at 10:30
@Persijn You can use **CSS animations** to achieve just about everything you can with SMIL. – JoshuaDavid Jun 17 '16 at 23:25
SVG animations (aka SMIL animations) are no longer depreciated: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B126-150%5D – David Smith Dec 16 '16 at 19:40
This has one drawback. You can no longer reference this animation to start others. For example this is not working ``` ``` Or am I doing someting wrong? When setting `begin` of `#flyUpText` to "0s" it's working as expected. Besides it's triggered right away. – Tucaen Aug 14 '20 at 19:47
[lol](https://stackoverflow.com/questions/8455773/svg-trigger-animation-with-event#comment47001640_8458825), *`Very little works in IE`* – ashleedawg Dec 10 '20 at 06:27

John Bentley · Answer 2 · 2018-09-17T04:31:37.427

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

SVG trigger animation with event

2 Answers2

Linked