Javascript DOM SVG 动画事件处理程序答案

【问题标题】：Javascript DOM SVG Animation Event HandlerJavascript DOM SVG 动画事件处理程序
【发布时间】：2015-10-06 13:00:50
【问题描述】：

我正在使用 SMIL 为 SVG 元素制作动画。我没有使用 CSS 动画，因为我没有为 CSS 属性设置动画，也没有使用 Web 动画，因为浏览器还不支持它们。

我想在动画结束时触发一个事件。有一个用于此的标准事件（“onend”），因此只需将其添加到元素即可。

在 Chrome 中，这似乎只有在我使用时才有效：

animation.onend = function(){thing();};

在 Firefox 中，这似乎只有在我使用时才有效：

animation.addEventListener("end", function(){thing();});

注意不同的事件名称，“onend”不起作用。

在 Safari 中，没有任何效果。以上两种方法我都试过了，还有

animation.setAttribute("onend", function(){thing();});
animation.setAttributeNS(null,"onend", function(){thing();});
animation.setAttributeNS("http://www.w3.org/2000/svg", function(){thing();});
animation.setAttribute("end", "thing();");

及其所有变体。检查器中的一切看起来都正确，但没有任何反应。

有什么线索可以让这个跨浏览器工作吗？

【问题讨论】：

标签： javascript html events svg

【解决方案1】：

AS SMIL 无论如何都会被弃用，而且你现在知道事件的支持很差。我建议使用网络动画。它们尚未得到广泛支持，但您可以使用 JavaScript polyfill
使用。https://github.com/web-animations/web-animations-js

【讨论】：

是的，没有。当 Web Animations 成为标准时，我将使用它，在此之前，它基本上是由浏览器随机支持并由随机 javscript 随机填充的随机特性集合；）我宁愿完全切换到 d3 而不是必须处理它。当然，几年后，我会很乐意重写这段代码以使用 Web 动画，但在那之前我会避开它们。
好吧，好吧。这听起来很合理。然后还有 github.com/ericwilligers/svg-animation 一个 SMIL Polyfill（虽然在 Web 动画之上）