SVGアニメーションをどのように同期できますか？

Question

円の動きの2秒後に長方形を動かしたいと思います。私は各アニメーションにIDを与えてから、beginイベント参照で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>