SVGAnimationElement: getSimpleDuration() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

SVGAnimationElement 方法 getSimpleDuration() 返回一個浮點數,表示此動畫的簡單持續時間的秒數。

簡單持續時間是指動畫在單次迭代中應執行的時間長度,不考慮重複、重新啟動或延長。

此屬性反映了 dur 屬性在 <animate><animateMotion><animateTransform> 元素中的應用。

語法

js
getSimpleDuration()

引數

無(undefined)。

返回值

浮點數。

異常

NotSupportedError DOMException

如果 SVGAnimationElement 的簡單持續時間未定義(例如,結束時間不確定),則會丟擲異常。當 dur 屬性設定為 indefinite 或未定義時,會發生這種情況,因為此時簡單持續時間被視為未定義。

示例

此示例演示了 dur="3s" 屬性如何定義 3 秒的簡單持續時間。

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="3s"
      repeatCount="indefinite" />
  </circle>
</svg>
js
const animationElement = document.querySelector("animate");

const simpleDuration = animationElement.getSimpleDuration();
console.log(`The simple duration is: ${simpleDuration} seconds`); // Output: 3

由於 repeatCount="indefinite" 指定了連續迴圈,因此有效持續時間是無限的,但每次迭代的簡單持續時間仍為 3 秒。

規範

規範
SVG 動畫級別 2
# __svg__SVGAnimationElement__getSimpleDuration

瀏覽器相容性