如何同步SVG动画？

Question

我希望在圆圈移动2秒后移动一个矩形。我给每个动画一个ID，然后使用ID和begin事件引用。但是，似乎没有任何效果。

<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>

Answer 1

更多信息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>