SVGでオブジェクトのグループをどのようにアニメーション化できますか？

Question

2つの矩形をグループ化すると、アニメーションが停止しますが、各矩形で別々に問題なく動作します。これをどうすれば解決できますか？

<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を有しています。 rect要素を削除して修正します。

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