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.

Is there a different name for it? I don't understand why I can't use a css file. The fill color works.

Working example.

css:

rect {
    fill:rgb(0, 0, 255);
    /*doesnt work height:100;*/
}

html:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="100" height="100" style="stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

Answer 1

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 2

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.