html - 如何同步 SVG 动画？

Question

我想让一个矩形在圆圈移动 2 秒后移动。我给每个动画一个 ID，然后将 ID 与开始事件引用一起使用。但是，似乎没有任何效果。

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