2012-03-01 84 views
0

使用JavaScript动态添加和动画SVG中特定组中的文本,我遇到了一个非常麻烦的问题,这对我来说没有任何意义。根据文档,每个animate元素应该分别仅影响它们的直接父元素,在这种情况下,这是每个单独的文本元素。问题是,假设我在0s创建一个动画文本元素,另一个在1s创建,两个动画都持续2s。从1秒开始的那个将在其动画的中途。然后,更糟的是,其后每个animate基本上都停留在他们的周期结束时。动画所有开始和结束在同一时间?

我试过设置begin="indefinite"并用element.beginElement()开火,但是这会产生同样的问题。我已经使用Chrome的元素检查器检查了结构,并且没有任何问题 - 每个animate都在text之内,并且每个text都在g之内。

它为什么这样做,我如何使每个animate独特?

+0

请张贴一个完整的例子,e.g上jsfiddle.net。 – 2012-03-01 07:38:12

回答

0

后摆弄的LOT我设法找到通过计算时间之间的偏移非常波涛汹涌的变通方法文档被加载时,并在创建animate元件时,设置begin属性到该量1000

划分
starttime=+new Date 
begin=(+new Date-starttime)/1000 

我仍然想要一个更好的解决方案,但是......有没有更有效的方法使animate元素在创建时开始,而不是记录和计算时间戳?至少我想使用wallclock(),因为这样可以节省波涛汹涌的计算量,但我无法实现这个目标。

编辑:我已经找到了更好的解决方案效果很好:SVG.getCurrentTime()

+0

如果您将问题发布在小提琴上,它将有助于他人学习。 – rajkamal 2012-03-02 13:51:34