Css SVG Rect忽略高度？

这是一个长方形的形状。我很想这样，但它不起作用，给了我一个空白。它发生在firefox和chrome中

它有不同的名字吗？我不明白为什么我不能使用css文件。填充颜色有效

工作示例

css:

html:

---

元素的宽度在SVG中不是CSS属性，它只能用作属性。例如，它类似于HTML中元素的大小。您只能将其设置为属性。

在SVG中，元素的x、y、宽度和高度不是。只有CSS属性可以使用CSS设置样式。

SVG不直接支持CSS设置形状尺寸

但是，有一个用于矩形的变通方法，也可用于生成水平线和垂直线：

将宽度和高度设置为1，并使用CSS变换：缩放宽度、高度 不指定x，y位置，并使用transform:translatex，y 例如

.svg{ 宽度：100px； 高度：30px； } .矩形{ 变换：缩放30,10； 填充物：橙色； } horiz线{ 变换：平移15px，5px缩放50，1； 填充物：红色； } .垂直线{ 转换：转换10px，5px刻度1，30； 填充：蓝色； }

---

对称矩形的解决方法：

矩形：悬停{ 笔划宽度：20！重要； }

---

啊，好吧。那么这是否意味着我需要使用javascript或其他东西来为每个rect添加属性？罗伯特朗森说：“我希望有一些漂亮干净的东西，比如css，哪种方式最干净？”？使用标记时，所有大小都是静态的，并且在html中。说到javascript，这是不是意味着我应该开始学习jQuery来进行dom操作，或者我可以暂时不用它；这只是DOM，不需要jquery。您提供的两个URL SVG attributes:和CSS properties:是相同的，但被调用以演示两者之间的差异。我不明白。

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

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