svgfirefoxcss-animationsbrowser-support

Firefox :animate SVG radius only works with percentages

I am trying to animate the SVG2 Geometry Property r, the radius property of a Circle Element.

I read that the property can be used as CSS property in browsers supporting SVG2 (see Resizing SVG Circle Radius Using CSS Animation).

Now I notice that animating r does only seem to work in Firefox if I express values as percentages. If I use absolute values, the circle is not being animated, see minimum reproduction CodeSandbox.

Does Firefox lack SVG2 support here?

Solution

  • As pointed out, stating lengths in pixel does the job. The spec indeed says that absolute lenths must be given in physical units. Omiting them will Chrome use px as fallback unit, while Firefox won't.