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

浏览器兼容性