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

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

本文关键字：时间 位置 动画 SVG 何获取 获取      更新时间：2024-03-31

假设我在SVG中制作一个动画，如下所示：

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

如果我将其与Javascript事件处理程序一起使用，是否有方法获取该动画的当前时间/位置，以便判断它是否即将结束？我正在寻找类似于使用elem.getAttribute（）.的东西

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

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

一旦知道了这一点，就可以计算出动画与它所具有的属性相距多远，以及它是否即将结束。

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

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

相关文章：