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

Question

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

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

或

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

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

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

一种不雅的方式

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

缺点：如果嵌入式SVG与父文档位于不同的安全上下文中，则不起作用。还有更好的方法吗？

Answer 1

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

然而，使用＆lt; img＆gt;你无法启动动画的元素，因为没有任何事件会被输入svg本身，因此不会在那里工作。在这种情况下也会禁用脚本，因此您也无法以这种方式触发或阻止动画。

使用＆lt; object＆gt;，＆lt; embed＆gt;或＆lt; iframe＆gt;你可以做脚本，例如你的建议。您可以将脚本标记添加为svg文件的svg根元素的第一个子元素之一，并在该＆lt; script＆gt;中添加脚本标记。元素调用pauseAnimations。但是你也可以按照你的建议从主文档中做到这一点。