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

要素のwidthは<rect>SVGの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 に答える