1

我创建了一个包含 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);
}

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

但后来我阅读了关于 Bugzilla 的这个错误报告，它专注于这个用例，并表明问题已经解决（尽管对于我在 FF13 中的测试，它显然还没有解决）。唔...

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

更新：

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

http://位。ly/LC3LEQ

这是一个页面，它引用了来自同一个域的同一个 SVG 文件。我已经更改了appendChild我之前代码中的语句以包含一个adoptNode()方法，该方法使它在 FF13 和 Opera 11.64 中工作，但动画仍然从未在 webkit 中启动：

http://位。ly/Mk0lnz

4

2 回答 2

3

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

第一种方式，通过使用脚本启动动画：

  • 获取要触发的每个动画元素，然后对其调用beginElement ()

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

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

于 2012-06-08T08:27:04.840 回答
0

Webkit 中有很多错误发生在这里：

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

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

我能够在 Webkit 中获得动画的唯一方法是遍历它们，从 svg 标记中获取目标值，然后使用 jquery animate() 手动为它们设置动画。没有一个 svg 特定的方法对我有用。

于 2012-06-19T17:11:04.830 回答