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