1

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?

geoM
  • 447
  • 4
  • 12
  • Units are mandatory in CSS. If Chrome does not require units, that's a Chrome bug. If I put px in throughout then Firefox works for me. – Robert Longson Jan 19 '21 at 17:14

1 Answers1

1

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.

geoM
  • 447
  • 4
  • 12