SVG矩形忽略高度？

Question

以下是需要翻译的内容：

这里有一个工作演示，展示了一个矩形。我想要将高度属性移动到CSS中，但是它不起作用，显示为空白。在Firefox和Chrome中都出现了这个问题。

这是因为它有另外一个名称吗？我不明白为什么不能使用CSS文件。填充颜色是可以正常工作的。

工作示例。

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>

- BruteCode

Answer 1

在SVG中，<rect>元素的x、y、width和height是属性而不是CSS属性。只有 CSS 属性可以使用 CSS 进行样式设置。

- Robert Longson

---

好的，那这是不是意味着我需要使用JavaScript之类的东西为每个矩形添加属性？我希望有像CSS一样漂亮而干净的东西。 - BruteCode

@RobertLongson，哪种方式最干净？使用标记语言，所有大小都将是静态的，并且在HTML内部。通过JavaScript，这是否意味着我应该开始学习jQuery进行DOM操作，还是可以暂时不用它？ - Stephane Rolland

我所说的 JavaScript 是指像 rect.setAttribute("x", "100") 这样的 DOM 操作，不需要使用 jQuery。 - Robert Longson

你提供的两个URL，SVG属性：http://www.w3.org/TR/SVG/attindex.html和CSS属性：http://www.w3.org/TR/SVG/attindex.html是相同的，但是它们被调用来展示两者之间的差异。我不理解。 - dumbledad

Answer 2

< p > 在SVG中，<rect>元素的width不是CSS属性，它只能用作属性。这就像HTML中的<select>元素的size一样。你只能将其设置为属性。

- Thomas W

Answer 3

SVG不直接支持使用CSS来设置形状的尺寸。

但是对于矩形，有一个解决方法，也可以用来生成水平和垂直线：

• 将宽度和高度设置为1，并使用CSS transform: scale(width, height)
• 不指定x、y位置，并使用transform: translate(x, y)

例如：

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

- Ian.mc

Answer 4

对称矩形的解决方法：

rect:hover {
  stroke-width: 20 !important;
}

<svg width="100" height="100">
  <rect
    stroke-width="0"
    fill="blue" stroke="blue"
    x="30" y="30" width="40" height="40"
  />
</svg>

（darkreader将使用不同的颜色来描边和填充）

- milahu