SVG Rect Ignores Height?

Question

Here is a working demo of a rectangle. I\'d like to move the height property to css and well, it doesn\'t work and gives me a blank. It happens in firefox and chrome.

<

Answer 1

The width of a <rect> element isn't a CSS property in SVG, it's only usable as an attribute. It's for example like the size of a <select> element in HTML. You can only set it as an attribute.

Answer 2

In SVG the x, y, width and height of <rect> elements are attributes rather than CSS properties. Only CSS properties can be styled using CSS.

Answer 3

SVG doesn't have a straightforward support for CSS for setting shape dimensions.

However there's a workaround for rects, which can also be used to generate horizontal and vertical lines:

• Set width and height to 1, and use CSS transform: scale(width, height)
• Don't specify x,y location, and use transform: translate(x, y)

E.g.

.svg {
  width: 100px;
  height: 30px;
}
.rectangle {
  transform: scale(30, 10);
  fill: orange;
}
.horiz-line {
  transform: translate(15px,5px) scale(50, 1);
  fill: red;
}
.vert-line {
  transform: translate(10px, 5px) scale(1, 30);
  fill: blue;
}

<svg>
  <rect class="rectangle" width="1" height="1" />
  <rect class="horiz-line" width="1" height="1" />
  <rect class="vert-line" width="1" height="1" />
</svg>