SVGAnimationElement: getCurrentTime() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

SVGAnimationElement 方法 getCurrentTime() 返回一个浮点数,表示相对于给定时间容器的零时间的当前时间(以秒为单位)。

时间零点指时间容器开始其时间线的时刻。它充当该容器内所有动画的起始参考点。

时间容器是定义一个或多个动画的本地时间线的元素或上下文。时间容器内的动画根据其时间线进行测量。如果时间容器被延迟、暂停或操作,其内部的所有动画都会相应调整。

语法

js
getCurrentTime()

参数

无(undefined)。

返回值

浮点数。

示例

此示例演示了 getCurrentTime() 方法如何检索自时间容器时间零点以来的经过时间。

html
<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="20" fill="rebeccapurple">
    <animate
      attributeName="cx"
      from="50"
      to="150"
      dur="4s"
      repeatCount="indefinite" />
  </circle>
</svg>
js
const animationElement = document.querySelector("animate");

setInterval(() => {
  const currentTime = animationElement.getCurrentTime();
  console.log(
    `Current time relative to the time container: ${currentTime} seconds`,
  );
}, 1000);

动画从 时间零点 = 0 开始并无限期运行,并且 getCurrentTime() 值在时间容器的上下文中持续递增。

规范

规范
SVG 动画级别 2
# __svg__SVGAnimationElement__getCurrentTime

浏览器兼容性