Javascript SVG使用事件触发动画

如何触发svg animate元素，通过javascript开始使用任意事件制作动画？我正在想象类似于

begin=“mySpecialEvent”

，然后我可以发送

mySpecialEvent

，动画将开始（或者如果已经播放过，则重新开始）。

这里有一篇文章介绍您需要的内容：

编辑：链接被删除。存档副本：

简言之：

准备好开始动画后，在

SVGAnimationElement

实例（

元素）上创建

。对于您的用例，使用标准的
addEventListener（）
回调在您准备好时调用此方法，例如

myAnimationElement.addEventListener('mySpecialEvent',function(){
  myAnimationElement.beginElement();
},false);

---

启动SVG动画：

如果没有javascript，则在动画元素上使用begin属性=“id.event”（不带“on”前缀）的“event value”类型；或

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

)，“控制动画计时的属性”，“开始”属性，“事件值”值类型

从javascript中，通过将动画元素的begin属性设置为“unfinite”；并从脚本中调用beginElement（）

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>

函数go（）{
var elements=document.getElementsByTagName（“动画”）；
对于（var i=0；i)，“控制动画计时的属性”，“开始”属性，“不确定”值类型，
+1为一个伟大的问题；我一直在想同样的事情。现在我知道了如何启动SVG动画点播，我可以改进这个答案了。：）伟大的事实上，简单地调用
beginElement（）
也可以完成这项工作。不幸的是，在IE上不起作用：“对象不支持属性或方法'beginElement'”@Starwave在IE中几乎不起作用。这是web开发的一个不幸事实。@Phrogz答案中的第一个链接已经死了。也许它可以被这个替代？既然SVG动画不再受支持，我们将使用什么？