2

您可以将 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 与父文档处于不同的安全上下文中,这将不起作用。有没有更好的办法?

4

1 回答 1

5

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

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

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

于 2012-07-09T08:50:14.667 回答