Question

这是一个矩形的working demo。我想move the height property to 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>

Answer 1

在SVG中，<rect>元素的x，y，宽度和高度为attributes而不是CSS properties。只能使用CSS设置CSS属性样式。

Answer 2

width元素的<rect>不是SVG中的CSS属性，它只能用作属性。例如，它类似于HTML中size元素的<select>。您只能将其设置为属性。

Answer 3

SVG没有直接支持CSS来设置形状尺寸。

然而，rects有一个解决方法，它也可用于生成水平和垂直线：

将宽度和高度设置为1，并使用CSS变换：scale（width，height）
不指定x，y位置，并使用transform：translate（x，y）

E.g。

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

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 将使用不同的颜色进行描边和填充）

SVG Rect忽略高度？

4 个答案: