Question

我创建了一个拥有3000多条路径的怪兽动画SVG文件。每个路径使用声明性SMIL动画独立动画。它在所有新浏览器中播放缓慢但精美，使用IE9的小js后备。（我发布了一个链接，但不会澄清任何内容。）

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

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);
}

各种浏览器中的Inspector工具显示文件正在正确加载。问题是动画永远不会被触发，所以没有任何反应！他们在DOM中。我可以看到他们。但是，无论在标记中启动SMIL动画的计时器或事件似乎都不适用于动态加载的动画元素。

但后来我在Bugzilla上阅读this bug report，专注于这个用例，并表明问题已经解决（尽管我在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()

Answer 2

Webkit中存在大量错误：

https://bugs.webkit.org/show_bug.cgi?id=82647

https://bugs.webkit.org/show_bug.cgi?id=74801

我能够在Webkit中获取动画的唯一方法是迭代它们，从svg标记中获取目标值，并使用jquery animate（）手动设置它们。没有一个svg特定的方法对我有用。

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

2 个答案: