javascript - 在 HTML 页面中嵌入动画 SVG，暂停（不启动动画）

Question

您可以将 SVG 文件嵌入到 (X)HTML 5 文档中：

<object data="anim.svg" id="svganim"/>

或者

<img src="anim.svg" alt="embedded SVG"/>

但如果anim.svg是动画，则动画将在页面加载后立即开始播放。

如何嵌入动画 SVG 文件以使动画开始时暂停？然后用户可以通过按下按钮来播放动画（unpauseAnimations()在 Javascript 中使用）

window.onload = function() {
    var svg_anim = document.getElementById('svganim').contentDocument.rootElement;
    svg_anim.pauseAnimations();
};

缺点：如果嵌入的 SVG 与父文档处于不同的安全上下文中，这将不起作用。有没有更好的办法？

score 5 · Accepted Answer

解决此问题的一种方法是通过更改 svg 文件来使动画不会自动启动（将 begin="indefinite" 添加到任何自动启动的动画中）。然后可以通过调用要触发beginElement()的动画元素来触发这些动画。如果你有很多这样的元素，它可能更容易使用pauseAnimations()。

但是，对于 <img> 元素，您无法启动动画，因为不会将任何事件输入到 svg 本身中，因此这不会在那里工作。在这种情况下，脚本也被禁用，因此您也不能以这种方式触发或阻止动画。

使用 <object>、<embed> 或 <iframe>，您可以编写脚本，例如您的建议。您可以添加一个脚本标记作为 svg 文件的 svg 根元素的第一个子元素之一，并在该 <script> 元素调用pauseAnimations中。但是您也可以按照您的建议从主文档中执行此操作。

1 回答 1