CODEWITHSUNDEEP
cssfirefoxsvg
David Forshner
David Forshner

Reputation: 163

Setting SVG element width/height attributes using CSS in Firefox

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" />

JSFiddle examples

Upvotes: 5

Views: 6393

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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.

Upvotes: 9

ahabion
ahabion

Reputation: 13

I've always wrapped my SVG's within a <span> or <div> and then sized up that element versus the SVG itself.

div {
  height: 20px;
  width: 20px;
  transform: translateX(50%) rotate(-30deg);
// you can essentially do everything in the div versus the svg
}

svg {
  height: 100%;
  width: 100%;
  fill: white
}

Upvotes: 0

Related Questions