SVG properties are ignored in Firefox

Issue

I am currently working on responsive SVG. On Chrome everything looks good and works. But on Firefox, my cx cy cr properties in CSS aren't applied.

On Chrome CSS overrides inline SVG as it should but on Firefox it doesn't work.

Properties on Firefox

HTML structure

Solution

UPDATE Firefox now supports geometric properties.

But make sure you include units with your values.

---

The ability to style geometric properties, sauch as cx, cy and r, is a new feature of the upcoming SVG 2 standard.

Chrome has implemented that part of SVG2, but Firefox hasn't yet.

If you need to support all browsers, you will need to set those attributes a different way.

Answered By - Paul LeBeau