将animateColor应用于多个SVG元素

Question

有没有办法一次为多个元素定义颜色动画？我尝试将animateColor添加到g元素，但这不起作用。我可以使用Javascript单独为每个元素添加animateColor，但我更愿意在静态SVG数据中完成所有操作。

Answer 1

请使用animate代替animateColor。至少Firefox目前没有实现animateColor，它在SVG 1.1 Second Edition中被弃用。使用animate动画填充和描边效果很好。例如：

<g>
  <animate attributeName="fill" from="black" to="red" dur="5s"/>
  <rect width="100" height="100"/>
  <circle cx="200" cy="50" r="50"/>
</g>