Setting SVG element width/height attributes using CSS in Firefox

Question

I'm trying to set the width and height attributes of SVG elements using CSS instead of putting them inline but I can't seem to get it working in firefox.

When I set the width/height inline on the element it displays with no problems.

 <rect x="10px" y="50px" fill="green" width="20px" height="20px" />

When I try to set the width/height using CSS it works in Chrome but not in Firefox.

.box {
    width: 20px;
    height: 20px;
}

<rect class="box" x="50px" y="50px" fill="green" />

• Tried this in both firefox 43 and 36 with the same behavior.
• When I inspect the missing SVG elements in firefox it looks like the CSS is being applied and the computed styles show the correct width/height values.
• I'm hoping I'm just doing something silly and Chrome is just "making it work". I'd like to avoid browser specific CSS if at all possible.

JSFiddle examples

Answer 1

Not all SVG element attributes can be styled with CSS. Only the ones designated as "properties" can be. See the list below from the SVG specification.

https://www.w3.org/TR/SVG/propidx.html

The (in development) SVG 2 specification will allow all attributes to be styled with CSS. And some browsers are starting to support that. But for now you won't be able to do it.

Update: Not all attributes will be styleable in SVG2. The list of styleable presentation attributes is here.