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.
<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.
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.
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:
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>