关于javascript：加载settimeout时svg动画无法启动


svg animation does not start when loaded with settimeout

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

代码在这里：javascript中的jsfiddle开关＃svg1和＃svg2。

通过浏览器检查，我发现这可能是一个webkit错误，因为chrome和safari都显示了FF 12和Opera的良好表现。

可以使用JS代码解决此问题，还是应该向Webkit提交错误？

==添加

我认为这个问题应该改写，为什么在用settimeout加载svg之后动画无法开始。

正如Jared在下面进行的研究一样，当元素出现在DOM中并通过dom操纵重新排列到focus元素中时，它可以工作，Chrome和webkit需要一个通过对animate元素的beginElement()调用来实现。对于纯文本构造的元素，这仍然无法解决。因为我只有一台Mac，但我仍然认为这是一个业余项目，因此我完全不使用MS IE。

相关讨论

好吧，它花了比我预期更长的时间，但是我知道了。基本上，您在标记上使用semi- SVG和正则表达式等使用的方法，至少可以说不是完全完成它的方法。

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

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

1
2
3
4
5
6
7
8
9
10
var $lasso = $('#lasso'),
    animater = $lasso.find('animate')[0],

...

animater.beginElement();

...

animater.endElement();

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

http://jsfiddle.net/9hBfs/

不过，我所谓的"套索"效果仍然存在。

我将引用Mozilla开发人员网络(MDN)站点，因为它们具有很多有用的信息，并且是受到高度信任的授权机构：

  • https://developer.mozilla.org/en/SVG
  • https://developer.mozilla.org/en/SVG/Element/animate
  • http://www.w3.org/TR/SVG11/animate.html#animation-mod
  • http://www.w3.org/TR/SVG11/animate.html#InterfaceElementTimeControl
  • http://www.w3.org/TR/SVG11/animate.html#RestartAttribute
相关讨论