Specifying an SVG rectangle's width and height in CSS

Question

Today is not my day for understanding CSS.

Given the following simple CSS

.EggBar {
    fill: teal;
}

and the following HTML fragment

<svg>
    <rect class="EggBar" width="20" height="100" x="0" y="0"></rect>
</svg>

the rendered result is just what I'd expect: a teal rectangle, width 20 and height 100, within the SVG on the page.

However, if I change the two fragments to

.EggBar {
    width: 20px;
    height: 100px;
    fill: teal;
}

and

<svg>
    <rect class="EggBar" x="0" y="0"></rect>
</svg>

i.e. I hand over responsibility for setting the width and the height of the rectangle from the SVG element to its CSS class, then the rectangle is not rendered - I'm guessing it ends up with width and height zero. Why? Why don't the two methods produce identical results?

See this Q/A: http://stackoverflow.com/questions/14383014/svg-rect-ignores-height - Those width & height aren't CSS-props, but svg props — toesslab, Apr 27 '14 at 08:52
Please help with this - http://stackoverflow.com/questions/23319537/html-5-inline-svg-and-namespace-awareness-for-svg-dom — Patt Mehta, Apr 27 '14 at 09:50
@GLES try putting a bounty on that question of yours if you want to attract more answers, that's worked well in the past for me. — dumbledad, Apr 27 '14 at 09:57
Thanks :) but the question is eligible for bounty after 2 days... :( — Patt Mehta, Apr 27 '14 at 09:59
if you do not set size for rect in SVG itself, it cannot be rescaled later with `width` and `height` in CSS . it has on first place no size at all .(**S** callable **V** ector **G** raphic) :) — G-Cyrillus, Apr 27 '14 at 10:33
@GCyrillus So if I set the attribute for the rect in SVG and then set the CSS height in code will the CSS new value work? — dumbledad, Apr 27 '14 at 12:14
it should work , you may need as well to set the attribute viewbox to svg , and resize svg , depends if you want to keep ratio or stretch element — G-Cyrillus, Apr 27 '14 at 12:24
No, it won't ever work to set a height on a rectangle in CSS. It's a completely different property. **Width, height and position of SVG shapes should be considered as equivalent to the text of an HTML element -- it's the basic content material, not a style or presentation effect.** If you need to change it dynamically, you'll need to use Javascript. This is different from "fill" which is a [presentation attribute](http://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes) -- a style property which can optionally be specified with XML instead of CSS. — AmeliaBR, Apr 27 '14 at 14:43

Specifying an SVG rectangle's width and height in CSS

0 Answers0