在CSS中指定SVG矩形的宽度和高度

Question

今天不是我understanding CSS的日子。

给出以下简单的CSS

.EggBar {
    fill: teal;
}

以及以下HTML片段

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

渲染结果正是我所期望的：页面上SVG内的青色矩形，宽度20和高度100。

但是，如果我将两个片段更改为

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

和

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

即。我将负责将矩形的宽度和高度从SVG元素设置为CSS类，然后矩形不呈现 - 我猜测它最终会有宽度和高度零。为什么？为什么这两种方法不能产生相同的结果？