如何获取SVG动画的当前时间/位置？

Question

假设我在SVG中制作动画如下：

    <animate begin="click" attributeName="opacity"
     from="1" to="0.5"
     dur="5s" fill="freeze" />

如果我和Javascript事件处理程序一起使用它，有没有办法获取这个动画的当前时间/位置，所以我可以说它是否即将结束？我正在寻找类似于使用elem.getAttribute（）的东西。

注意：我的目的是在没有CSS支持的情况下撤消动画，但无论如何这个问题本身就很有趣。

Answer 1

外部SVG元素有一个getCurrentTime方法，可用于查找动画时间轴的距离。

一旦你知道你可以根据它的属性以及它是否即将结束来计算动画的距离。

当动画结束时，还会发送一个结束，您可以根据需要使用它。例如。 elem.setAttribute("onend", "alert('done')");

我不确定webkit是否支持开始/结束事件，但Firefox确实如此。