Question

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

代码在这里：jsfiddle切换#svg1，以及javascript中的＃svg2。

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

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

==已添加

我认为应该重新解释为什么在svg加载settimeout后动画无法启动的原因。

正如Jared在下面研究的那样，当元素存在于DOM中并通过dom操作重新排序到焦点元素时，它可以工作，Chrome和webkit需要对animate元素进行beginElement（）调用。对于由纯文本构造的元素，这仍然无法解决。因为我只有一台Mac，我仍然认为这是一个爱好项目，我将MS IE完全抛弃了。

Answer 1

嗯，它花了比我预期的要长一点，但我得到了解决。基本上，你使用半SVG和标记上的正则表达式等方法，至少可以说是完成它的方法。

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

我重复了这个例子，完全忽略了箭头，因为它与问题无关。我专注于创建和测试动画功能。你以前缺少的关键点是：

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

...

animater.beginElement();

...

animater.endElement();

以下是我制作的演示，与您在问题中的内容有很大不同：

http://jsfiddle.net/9hBfs/

我称之为“套索”的效果仍然存在。

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

加载settimeout时svg动画无法启动

1 个答案: