Animation 将animateColor应用于多个SVG元素

有没有办法一次定义多个元素的彩色动画？我尝试将

animateColor

添加到

g

元素，但没有成功。我可以使用Javascript分别向每个元素添加

animateColor

，但我更喜欢在静态SVG数据中完成所有操作。

请使用

animate

而不是

animateColor

。至少Firefox目前没有实现

animateColor

，而且在SVG1.1SecondEdition中遭到了反对。使用

animate

为填充和笔划设置动画效果很好。例如：

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

谢谢，成功了。Firefox似乎不支持任何类型的SVG动画，但它在Chrome和Safari中工作。Firefox 4支持SVG动画。好吧，当我说Firefox不支持某些东西时，我的意思是最新的稳定版本不支持它。我刚刚注意到另一件事（使用Chrome）：只要元素尚未定义“填充”属性，则将animateColor放入g中的操作将按预期进行。当animateColor位于rect标记内时，它将覆盖rect的fill属性。（animate标记的行为与此相同。）因此这可能是WebKit中的一个错误。幸运的是，您只需再等几天，直到最新的稳定Firefox版本支持动画为止。：-）“g”上的填充不会覆盖子“rect”上指定的填充，这是正确的行为，顺便说一句。这与您的操作相同。