In a little experiment I’m working on I recently found a bit of a show-stopping problem. After an APB on Twitter I got a rapid reply which helped me solve it, but it seems that I may be the first person to encounter this error, therefore it’s encumbent on me to document it. So this is that.
I’ve defined a radial gradient with two color stops. The first
stop element has an
offset attribute with a value of 20% – values can be defined with a number (0 to 1) or a percentage. The relevant markup looks like this (view the page source for the full code):
<defs> <radialGradient id="rings"> <stop class="stop1" offset="20%" /> <stop class="stop2" /> </radialGradient> </defs>
Next I’ve added an
animate element inside the first
stop, which transitions the value of the
offset attribute from 20% to 100%, over a duration of one second:
<stop class="stop1" offset="20%"> <animate attributeName="offset" from="20%" to="100%" dur="1000ms" repeatCount="indefinite" /> </stop>
This is how the result should appear:
This animation works perfectly in Firefox, but not at all in Chrome or Safari (IE doesn’t support SVG animation, so this isn’t a consideration). But worse, the presence of the
animate element somehow means the
offset value of the
stop parent isn’t applied – so I get no animation, and no graceful fallback.
If you’re using Chrome or Safari, you can see the problem here (it will look fine in Firefox):
I have to thank Dirk Schulze of Adobe, co-editor of the SVG2 spec, for this solution. The problem is due to a vagueness in the SVG spec, and a differing interpretation by browser vendors. The spec says the value of the
must match the attribute type, and the type is
SVGAnimatedNumber, meaning strictly that only number values should be animated.
However, as mentioned earlier, percentages are a valid value type. So Firefox have been more forgiving in allowing percentage values to animate, while Chrome and Safari are stricter in only allowing number values. Therefore, the solution to the problem is to avoid percentage values, as you see here:
<stop class="stop1" offset="0.2"> <animate attributeName="offset" from="0.2" to="1" dur="1000ms" repeatCount="indefinite" /> </stop>
The result is an animation which works cross-browser, as you see here (if your browser supports it):
As both numbers and percentages are valid values for the
offset attribute, it should be possible to animate them. My ideal situation would be that Chrome and Safari allow percentages to be animated, and the spec is updated to make that clearer. I’ll use this article as a bug report and see if something can happen.