javascript - SMIL 动画在动态加载的外部 SVG 上失败

Question

我创建了一个包含超过 3000 条路径的怪物动画 SVG 文件。每个路径都使用声明性 SMIL 动画独立地进行动画处理。它在所有新浏览器中播放缓慢但精美，为 IE9 使用一点 js 回退。 (我会发布一个链接，但它不会澄清任何事情。)

我使用 HTML5 和内联 SVG 开发了该页面。就在我完成时，我意识到我不想强制移动浏览器在这个巨大的文件上窒息。所以我将 svg 移动到一个外部文件，并重新添加所有 xml 声明。在页面中的重要信息已经呈现后，我调用外部 svg，使用一些条件逻辑和一些教科书 ajax:

function loadThatSvg(){
    var xhr = new XMLHttpRequest;
    xhr.open('get','floral.svg',true);
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 ) {
                var flowers = xhr.responseXML.getElementById('floralpaths');
                var stage = document.getElementById('stage');
                stage.appendChild(flowers);
            }
        }
    };
    xhr.send(null);
}

window.onload = function(){
    setTimeout(loadThatSvg,3000);
}

各种浏览器中的检查器工具显示文件正在正确加载。问题是动画永远不会被触发，所以什么也不会发生!它们在 DOM 中。我能看到他们。但是，在标记 中启动 SMIL 动画的任何计时器或事件似乎都不适用于动态加载 动画元素。

但后来我读到this bug report在 Bugzilla 上，它专注于这个用例，并表明问题已经解决(尽管对于我在 FF13 中的测试，它显然没有)。嗯……

是否有一些自定义函数或声明可用于在动态加载的 SVG 内容中启动 SMIL 动画的时钟？即使答案是断然的“不”，但对于像我这样的人来说，了解一种或另一种方式会很好。感谢您的澄清!

更新:

这是原始 svg 文件。它适用于 FF、Opera 和 Webkit。请耐心等待:

http://bit . ly/LC3LEQ

这是一个引用来自同一域的相同 SVG 文件的页面。我已经更改了我早期代码中的 appendChild 语句以包含一个 adoptNode() 方法，这让它在 FF13 和 Opera 11.64 中工作，但动画仍然没有被踢在 webkit 中关闭:

http://bit . ly/Mk0lnz

Answer 1

有一些方法可以做到这一点。请注意，我假设您已经将动画文档插入到主文档中。

第一种方式，通过脚本启动动画:

• 获取每个你想触发的动画元素然后调用beginElement()在上面

第二种方法是重置文档中的当前时间，动画元素相对于该时间。这可能有效，您必须测试并查看:

• 获取动画文档的根 svg 元素，并调用 setCurrentTime(0)在上面

如果你选择第二个，但它不起作用，你也可以尝试暂停和取消暂停，如下所示:

• 获取动画文档的根 svg 元素(下面的变量“svgroot”)
• 调用 svgroot。 pauseAnimations()
• 调用 svgroot。 setCurrentTime(0)
• 调用 svgroot。 unpauseAnimations()