使用 settimeout 加载时，svg 动画不会启动答案

【问题标题】：svg animation does not start when loaded with settimeout使用 settimeout 加载时，svg 动画不会启动
【发布时间】：2012-06-10 20:02:22
【问题描述】：

我正在一个页面中加载 2 个嵌入式 svg-let。一个动画一个没有。它们使用 setTimeout 按顺序加载。当我首先加载动画一切顺利时，动画按预期开始，然后第二个静态 svg 正确显示。当我第一次加载第二个，然后是动画时，动画没有开始。

代码在这里：jsfiddle 在 javascript 中切换 #svg1 和 #svg2。

在浏览器检查后，我发现这可能是一个 webkit 错误，因为 chrome 和 safari 都显示这种行为 FF 12 和 Opera 都很好。

这可以用 JS 代码修复还是我应该用 webkit 提交错误？

== 已添加

我认为这个问题应该换个说法，为什么动画在加载了 settimeout 的 svg 后没有开始。

正如 Jared 在下面调查的那样，当元素存在于 DOM 中并通过 dom 操作重新排序到焦点元素中时，它可以工作，Chrome 和 webkit 需要通过对 animate 元素的 beginElement() 调用来启动。这仍然不适用于从纯文本构造的元素。因为我只有一个 mac，而且我仍然认为这是一个爱好项目，所以我完全不考虑 MS IE。

【问题讨论】：

在 Opera 12 中工作正常。
@ErikDahlström 感谢您检查和更新问题。
你知道你在自动小提琴onLoad处理程序中加载了jsFiddle的$(document).ready()吗？
我做了一些重新格式化，以便您的标记更容易理解：jsfiddle.net/userdude/Kx3Hw/4 此外，它似乎在 FF13、Win7 上运行良好。
我实际上已经想通了，但我还没有完成演示。

标签： javascript svg settimeout

【解决方案1】：

嗯，花费的时间比我预期的要长，但我解决了。基本上，您使用 semi-SVG 和标记上的正则表达式等的方法至少可以说不是完成它的方法。

答案是使用svg DOM 动画方法和属性，尤其是在您希望动画运行时启动/停止动画。显然，Firefox 只需通过操作内部 HTML/标记就可以重新初始化元素和动画。然而，Chrome（Webkit？）实际上需要您以编程方式访问和控制元素。我没有登录 IE、Opera 或 Safari。

我重做了示例，完全省略了箭头，因为它与问题无关。相反，我专注于创建和测试动画功能。您之前遗漏的关键点是：

var $lasso = $('#lasso'),
    animater = $lasso.find('animate')[0],

...

animater.beginElement();

...

animater.endElement();

这是我制作的演示，与您的问题有很大不同：

http://jsfiddle.net/9hBfs/

我所说的“套索”效果仍然存在。

我会参考 Mozilla 开发者网络 (MDN) 网站，因为他们有很多很棒的信息并且是一个高度信任的权威：

【讨论】：

注意，我已经在 Opera 中进行了测试，它运行良好。在 IE9 中它没有，赋予 Object 不支持属性或方法 'endElement'。 IE 的svg 支持我不是很清楚，但这并不完全令人惊讶。我看看能不能找到解决办法。
非常感谢您的调查。 beginElement 确实在 settimeout 内发挥了作用。然而，我的用例实际上是关于从一段文本中构造元素，在我的应用程序中，它是从外部外部 url 读取的，然后通过正则表达式替换进行操作。我从您的贡献/努力中学到了很多，再次感谢您。我目前只知道通过 innerHTML 或 jquery 的 $(') 构造 dom 对象，所以也许还有其他方法。
我想我不知道该说什么？这不是使用损坏标记的理由（这就是我在原始小提琴中看到的所有内容）。如果你真的，真的需要做一些让你做一些奇特的事情，比如在页面加载后正则表达式标记并将其重新注入，那么我认真建议你转移到像 jQuery SVG 或 Raphael 这样的库。然后使用这些库来处理 DOM 元素。但是你不应该像那样对标记进行正则表达式，这对你的健康有害。 :)
查看这个问题以获得库的比较：stackoverflow.com/a/2381953/451969
是的，我明白。我也很抱歉没有更清楚地说明正则表达式的摆弄是我自己真实用例的一种替代品。我的眉毛越来越多，但是我对正则表达式很满意。我目前正在开发一个项目 (www.iscriptdesign.com)，该项目大量使用此功能，并且我想在其中添加动画。