0

以下は私のコードです：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="1200px" height="1500px" viewBox="0 0 400 500" id="RoomsSVG">
  <svg id="Room1" width="1200px" height="500px" x="0px" y="0px">
    <rect id="Room1Rect" width="100%" height="100%" fill="red" stroke="black" stroke-width="5px" />
  </svg>
  <svg id="Room2" width="1200px" height="500px" x="0px" y="500px">
    <rect id="Room2Rect" width="100%" height="100%" fill="green" stroke="black" stroke-width="5px" />
  </svg>
  <svg id="Room3" width="1200px" height="500px" x="0px" y="1000px">
    <rect id="Room3Rect" width="100%" height="100%" fill="blue" stroke="black" stroke-width="5px" />
  </svg>
</svg>

色の違う四角を3つ描きたいのですが、縦に並べたいのですが、いつも表示がおかしくて画面全体(幅:1200px、高さ:1500px)が赤で塗りつぶされてしまいます。理由がわかりますか?私は既に 1 時間以上変更を行っていますが、それでも変更はありません。誰がその理由を教えてくれますか? ありがとうございました！

4

1 に答える 1

1

このviewBox属性は、幅400、高さ500（ユーザー座標）の長方形を切り取ります。つまり、一番上の赤い長方形だけが表示され、他のすべてはビューボックスの外側にあります。

これは、赤いボックスの幅が1200単位であるため、ボックスの右マージンが表示されない理由でもありますが、ビューボックスには0から400の間の値しか表示されません。

于 2012-12-26T07:31:11.097 に答える