SMIL动画失败的动态加载外部SVG [英] SMIL animations fail on dynamically loaded external SVG
问题描述
我创建了一个怪物的动画SVG文件超过3000的路径。每个路径动画独立使用声明SMIL动画。它起着缓慢但精美的所有新的浏览器，使用IE9一点的JS回退。 （我会发布一个链接，但它不会澄清什么。）
I've created a monster animated SVG file with over 3000 paths. Each path animates independently using declarative SMIL animations. It plays slowly but beautifully in all new browsers, using a little js fallback for IE9. (I'd post a link but it wouldn't clarify anything.)
我开发使用HTML5和联SVG页面。就在我整理，我意识到，我不想强迫移动浏览器呛到这个巨大的文件。让我感动的SVG到外部文件，并添加所有的XML声明早在我打电话的外部SVG后，在页面中的重要信息已经呈现，使用一些有条件的逻辑和一些教科书阿贾克斯：
I developed the page using HTML5 and inline SVG. Just as I was finishing, I realized that I didn't want to force mobile browsers to choke on this huge file. So I moved the svg to an external file, and added all the xml declarations back in. I'm calling the external svg after the important info in the page has already rendered, using some conditional logic and some textbook 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);
}
在各种浏览器
Inspector工具显示该文件得到正确加载。的问题是，动画从未触发，所以什么都不会发生！他们那里的DOM。我可以看到他们。但无论定时器或事件揭开序幕SMIL动画的标记中的似乎并不适用的动态加载的动画元素。
Inspector tools in the various browsers show the file is getting loaded correctly. The problem is that the animations are never triggered, so nothing happens! They're there in the DOM. I can see them. But whatever timer or event that kicks off SMIL animations in markup doesn't appear to apply to dynamically loaded animation elements.
但后来我看了上的Bugzilla这个bug报告，其重点是这个使用情况，并建议该问题已经得到解决（虽然我在FF13测试中，它显然还没有）。嗯......
But then I read this bug report on Bugzilla, which focuses on this use case, and suggests that the problem has been solved (though for my tests in FF13 it clearly hasn't). Hmm...
有没有我可以用它来开始SMIL动画时钟的动态加载SVG内容部分自定义函数或声明？即使答案是平出不，这将是很好的乡亲像我知道的一种方式或其他。感谢您的任何澄清！
Is there some custom function or declaration I can use to start the clock on SMIL animations in dynamically loaded SVG content? Even if the answer is flat-out "no," it would be nice for folks like me to know one way or the other. Thanks for any clarification!
更新：
下面是原始SVG文件。它工作在FF，Opera和Webkit的。要有耐心，请：
Here's the raw svg file. It works in FF, Opera, and Webkit. Be patient please:
和这里的页面引用了同样的SVG文件，从同一个域。我已经改变了的appendChild声明，我先前的code到包括adoptNode（）方法，它得到它FF13和Opera 11.64工作，但是动画仍然没有WebKit中拉开序幕：
And here's a page that references that very same svg file, from the same domain. I've changed the appendChild statement in my earlier code to include an adoptNode() method, which gets it working in FF13 and Opera 11.64, but the animation is still never kicked off in webkit:
推荐答案
有在Webkit的错误发生在这里的一台主机：
There are a host of bugs in Webkit happening here:
https://bugs.webkit.org/show_bug.cgi?id=82647
https://bugs.webkit.org/show_bug.cgi?id=74801
这是我能得到的动画WebKit中去的唯一办法是遍历他们，从SVG标记获得目标值，并与jQuery的动画手动它们的动画（）。无SVG的具体方法为我工作的。
The only way that I was able to get the animations going in Webkit was to iterate over them, get the target values from the svg markup, and animate them manually with jquery animate(). None of the svg specific methods worked for me.
这篇关于SMIL动画失败的动态加载外部SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
