如何获取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支持。