如何获取 SVG 动画的当前 time/position?

How to get current time/position of a SVG animation?

假设我在 SVG 中制作这样的动画:

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

如果我将它与 Javascript 事件处理程序一起使用,是否有办法获取此动画的当前 time/position,以便我可以判断它是否即将结束?我正在寻找类似于使用 elem.getAttribute().

的东西

注意:我的意图是在没有 CSS 支持的情况下反转动画,但无论如何这个问题本身很有趣。

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

一旦你知道你可以算出你的动画距离它所拥有的属性还有多远,以及它是否即将结束。

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

我不确定 webkit 是否支持 begin/end 事件,但 Firefox 支持。