SVGAnimationElement: getStartTime() 方法
SVGAnimationElement 方法 getStartTime() 返回一个浮点数，表示此动画元素的当前时间间隔的开始时间（以秒为单位），如果该时间间隔存在，则无论该时间间隔是否已经开始。
getStartTime() 返回的开始时间以秒为单位，相对于时间容器的零点时间。
零点时间指的是时间容器开始其时间线的那一刻。它充当该容器内所有动画的起始参考点。
时间容器是一个元素或上下文，它为一项或多项动画定义了一个本地时间线。时间容器内的动画是相对于其时间线测量的。如果时间容器被延迟、暂停或操作，它内部的所有动画都会相应调整。
此属性反映了 <animate>、<animateMotion> 或 <animateTransform> 元素的 begin 属性。
语法
js
getStartTime()
参数
无（undefined）。
返回值
浮点数。
异常
InvalidStateErrorDOMException-
如果
SVGAnimationElement没有当前时间间隔，则会抛出此异常。当动画元素的begin时间尚未到达或定义时，就会发生这种情况，因此getStartTime()方法无法确定有效的开始时间。例如，当动画设置为begin="click"时，但用户尚未单击以触发它。
示例
此示例演示了 begin="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="5s" begin="3s" />
</circle>
</svg>
js
const animationElement = document.querySelector("animate");
const startTime = animationElement.getStartTime();
console.log(
`The animation starts at: ${startTime} seconds relative to the time container's timeline`,
); // Output: 3
getStartTime() 方法返回 3.0，因为这是相对于时间容器零点时间的。
规范
| 规范 |
|---|
| SVG 动画级别 2 # __svg__SVGAnimationElement__getStartTime |
浏览器兼容性
加载中…