Why has my SMIL animation stopped working? - animation

Question

I did a simple loading icon with six rectangles that darken in series, my image is:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60">
<g transform="translate(30,30)">
<g transform="rotate(0)">
<rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a1b" begin="0s;a6b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a1w" begin="1s;a6w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
<g transform="rotate(60)">
<rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a2b" begin="a1b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a2w" begin="a1w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
⋮
<g transform="rotate(300)">
<rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a6b" begin="a5b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a6w" begin="a5w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
</g>
</svg>
When I initially created the document, this structure worked. Now it doesn't. Anyone know why?

Answer 1

The <animateColor> elements was deprecated in SVG 1.1 and is being completely removed for SVG 2. Some browsers are removing it already.
To achieve the same effect, just use <animate> with all the same attributes.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60" style="width:100vmin">
<defs>
<title>Loading Icon</title>
<style type="text/css">
rect {
stroke: black;
stroke-width: .75;
fill: transparent;
}
</style>
<rect id="bar" x="-3" y="9" rx="3" ry="3" width="6" height="20"/>
</defs>
<g transform="translate(30,30)">
<g transform="rotate(0)">
<rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a1b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="0s;a6b.end" />
<animate id="a1w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="1s;a6w.end" />
</rect>
</g>
<g transform="rotate(60)">
<rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a2b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a1b.end" />
<animate id="a2w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a1w.end" />
</rect>
</g>
<g transform="rotate(120)">
<rect id="rect3" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a3b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a2b.end" />
<animate id="a3w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a2w.end" />
</rect>
</g>
<g transform="rotate(180)">
<rect id="rect4" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a4b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a3b.end" />
<animate id="a4w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a3w.end" />
</rect>
</g>
<g transform="rotate(240)">
<rect id="rect5" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a5b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a4b.end" />
<animate id="a5w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a4w.end" />
</rect>
</g>
<g transform="rotate(300)">
<rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a6b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a5b.end" />
<animate id="a6w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a5w.end" />
</rect>
</g>
</g>
</svg>