如何爲SVG中的一組對象設置動畫效果？

Question

每當我將兩個矩形分組在一起時，動畫停止工作，但它對每個矩形都單獨工作。我怎樣才能解決這個問題？

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

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

<animate xlink:href="#rects" 
attributeName="fill" dur="4s" 
repeatCount="indefinite" 
values="gold; gold; ivory; gold" 
keyTimes="0; 0.7; 0.8; 1" /> 

</svg> 

Answer 1

rect元素上的填充比g元素上的填充大了CSS specificity。刪除矩形元素填充來修復。

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

 
<g id="rects"> 
 
<rect x="50" y="400" width="50" 
 
height="20" /> 
 
<rect x="50" y="470" width="50" 
 
height="20" /> 
 
</g> 
 

 
<animate xlink:href="#rects" 
 
attributeName="fill" dur="4s" 
 
repeatCount="indefinite" 
 
values="gold; gold; ivory; gold" 
 
keyTimes="0; 0.7; 0.8; 1" /> 
 

 
</svg>