在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与父文档位于不同的安全上下文中,则不起作用.有没有更好的办法？

Answer 1

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

但是,使用<img>元素,你无法启动动画,因为没有任何事件会被输入svg本身,因此不会在那里工作.在这种情况下脚本也被禁用,因此您也无法以这种方式触发或阻止动画.

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