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

瀏覽器相容性