如何同步SVG动画？

问题描述：

我想在圆圈移动2秒后做出矩形移动。我给每个动画一个ID，然后在开始事件引用中使用ID。然而，似乎没有任何工作。如何同步SVG动画？

<svg width="800" height="600" style="background-color:black"> 

<circle id="circle" cx="30" cy="100" r="20" fill="gold" /> 

<animate 
xlink:href="#circle" 
attributeName="cx" 
from="30" 
to="750" 
dur="4s" 
repeatCount="indefinite" 
id="circ-anim" /> 

<rect id="rectangle" x="50" y="400" width="50" height="20" fill="gold" /> 

<animate 
xlink:href="#rectangle" 
attributeName="x" 
dur="3s" 
from="50" 
to="450 
begin="circ-anim.begin + 2s" 
id="rect-anim" /> 

</svg>

你看begin'如何'是蓝色的，而所有其他属性是红色的？一旦这个错字被修复，如果你正在使用FF，那么尝试将'＃circ-anim'改为'＃circ_anim'。我想我记得'-'并不是真的很喜欢id。 – Kaiido

你忘了''''后''='450' – Kaiido

@Kaiido thanx很多，现在一切都很完美） – CeeJay

答

更多信息here。您也可以添加另一个开始点。我已经把所有内容放在CeeJay上面说的片段中。

<svg width="800" height="600" style="background-color:black"> 
 

 
<circle id="circle" cx="30" cy="100" r="20" fill="gold" /> 
 

 
<animate 
 
xlink:href="#circle" 
 
attributeName="cx" 
 
from="30" 
 
to="750" 
 
dur="4s" 
 
repeatCount="indefinite" 
 
id="circanim" /> 
 

 
<rect id="rectangle" x="50" y="400" width="50" height="20" fill="gold" /> 
 

 
<animate 
 
xlink:href="#rectangle" 
 
attributeName="x" 
 
dur="3s" 
 
from="50" 
 
to="450" 
 
begin="circanim.begin+2s" 
 
id="rectanim" 
 
repeatCount="indefinite"/> 
 

 
</svg>

如何同步SVG动画？

相关推荐