SVGSVGElement:unpauseAnimations() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

SVGSVGElement 接口的 unpauseAnimations() 方法会恢复(即取消暂停)当前正在运行且定义在 SVG 文档片段中的动画,使动画时钟从暂停时的时间点继续播放。

语法

js
unpauseAnimations()

参数

无。

返回值

无(undefined)。

示例

恢复动画

html
<svg id="exampleSVG" width="200" height="100">
  <circle cx="50" cy="50" r="30" fill="blue">
    <animate
      attributeName="cx"
      from="50"
      to="150"
      dur="2s"
      repeatCount="indefinite" />
  </circle>
</svg>

<button id="pauseBtn">Pause Animations</button>
<button id="resumeBtn">Resume Animations</button>
<pre id="status"></pre>
js
const svgElement = document.getElementById("exampleSVG");
const pauseButton = document.getElementById("pauseBtn");
const resumeButton = document.getElementById("resumeBtn");
const statusDisplay = document.getElementById("status");

pauseButton.addEventListener("click", () => {
  svgElement.pauseAnimations();
  statusDisplay.textContent = "Animations paused.";
});

resumeButton.addEventListener("click", () => {
  svgElement.unpauseAnimations();
  statusDisplay.textContent = "Animations resumed.";
});

规范

规范
SVG 动画级别 2
# __svg__SVGSVGElement__unpauseAnimations

浏览器兼容性

另见