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

Answer 1

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

Go

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



Go

(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