SVGSVGElement:animationsPaused() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

SVGSVGElement 接口的 animationsPaused() 方法用于检查 SVG 文档片段中的动画当前是否处于暂停状态。

语法

js
animationsPaused()

参数

无。

返回值

布尔值。如果此 SVG 文档片段处于暂停状态,则为 true

示例

检查动画是否暂停

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/Resume Animations</button>
<pre id="status"></pre>
js
const svgElement = document.getElementById("exampleSVG");
const pauseButton = document.getElementById("pauseBtn");
const statusDisplay = document.getElementById("status");

function updateStatus() {
  const isPaused = svgElement.animationsPaused();
  statusDisplay.textContent = `Animations paused: ${isPaused}`;
}

pauseButton.addEventListener("click", () => {
  if (svgElement.animationsPaused()) {
    svgElement.unpauseAnimations();
  } else {
    svgElement.pauseAnimations();
  }
  updateStatus();
});

// Initialize the status display
updateStatus();

规范

规范
SVG 动画级别 2
# __svg__SVGSVGElement__animationsPaused

浏览器兼容性

另见