Apply animateColor to multiple SVG elements

Question

Is there a way to define color animation for multiple elements at once? I tried adding the animateColor element to the g element, but that didn't work. I could use Javascript to add animateColor for each element separately, but I would rather do it all in SVG static data.

Answer 1

Use animate instead of animateColor . Firefox, at least, does not implement animateColor at the moment, and it is deprecated in SVG 1.1 Second Edition. Using animate to animate fill and stroke is very simple. For instance:

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