将 animateColor 应用于多个 SVG 元素

Question

有没有办法同时为多个元素定义颜色动画？我尝试将 animateColor 添加到 g 元素，但这不起作用。我可以使用 Javascript 分别向每个元素添加 animateColor，但我更喜欢在静态 SVG 数据中完成这一切。

Answer 1

请使用 animate 而不是 animateColor。至少 Firefox 目前还没有实现 animateColor，而且它在 SVG 1.1 第二版中已被弃用。使用 animate 来动画填充和描边效果很好。例如：

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