在HTML页面中嵌入动画SVG，暂停（无需启动动画）(Embed animated SVG in HTML page, paused (without starting animation))

 您可以将SVG文件嵌入到（X）HTML 5文档中： 
 
<object data="anim.svg" id="svganim"/>
 
 要么 
 
<img src="anim.svg" alt="embedded SVG"/>
 
 但是如果anim.svg是动画的，动画将在页面加载后立即开始播放。 
 
 如何嵌入动画SVG文件，以便动画开始暂停？ 然后用户可以通过按下按钮来播放动画unpauseAnimations()在Javascript中使用unpauseAnimations() ） 
 
 一种不雅的方式 
 
window.onload = function() {
    var svg_anim = document.getElementById('svganim').contentDocument.rootElement;
    svg_anim.pauseAnimations();
};
 
 缺点：如果嵌入式SVG与父文档位于不同的安全上下文中，则不起作用。 有没有更好的办法？ 

You can embed an SVG file into into an (X)HTML 5 document:
 
<object data="anim.svg" id="svganim"/>
 
or
 
<img src="anim.svg" alt="embedded SVG"/>
 
But if anim.svg is animated, the animation will start playing as soon as the page loads.
 
How can you embed an animated SVG file such that the animation starts out paused? The user can then play the animation by pressing a button (using unpauseAnimations() in Javascript)
 
An inelegant way
 
window.onload = function() {
    var svg_anim = document.getElementById('svganim').contentDocument.rootElement;
    svg_anim.pauseAnimations();
};
 
Disadvantage: this doesn't work if the embedded SVG is in a different security context from the parent document. Is there a better way?

原文：