SVGAnimationElement: getSimpleDuration() 方法
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 |
浏览器兼容性
加载中…