1

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

代码在这里：jsfiddle switch #svg1 和 #svg2 in the javascript。

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

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

== 已添加

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

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

4

1 回答 1

1

嗯，这比我预期的要长得多，但我成功了。基本上，您SVG在标记等上使用 semi- 和正则表达式的方法至少可以说不是完成它的方法。

答案是使用svgDOM 动画方法和属性，尤其是在您希望动画运行时启动/停止动画。显然，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) 站点，因为它们有很多重要的信息并且是高度信任的权威：

于 2012-06-09T14:55:13.270 回答