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