如何同步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>

來源

2017-08-10 CeeJay

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

來源

2017-08-10 08:39:25

如何同步SVG動畫？

回答

相關問題