cssfirefoxsvgresponsive-designinline-svg

SVG properties are ignored in Firefox


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.