如何为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>