10

这是一个矩形的工作演示。我想将 height 属性移到 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>
4

4 回答 4

17

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

于 2013-01-17T16:14:20.137 回答
6

元素的不是 SVG 中width的<rect>CSS 属性，它只能用作属性。例如，它就像HTMLsize中的一个<select>元素。您只能将其设置为属性。

于 2013-01-17T16:11:31.823 回答
4

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

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

  • 将宽度和高度设置为 1，并使用 CSS 变换：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>

于 2015-02-20T06:57:07.693 回答
0

对称矩形的解决方法：

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

于 2021-02-28T17:16:09.787 回答