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>

我想画三个正方形，它们有不同的颜色。我想让它们垂直排列，但是显示总是错误的。红色填充整个屏幕（宽度：1200px，高度：1500px）。我没有知道为什么吗？我已经修改了一个多小时了，还是这样。谁能告诉我原因？谢谢！

4

1 回答 1

1

该viewBox属性切出一个宽度为 400 和高度为 500（在用户坐标中）的矩形。这意味着，只能看到最上面的红色矩形，所有其他矩形都位于视图框之外。

这也是您看不到框右边距的原因，因为红色框是 1200 单位宽，但视图框只显示 0 到 400 之间的内容。

于 2012-12-26T07:31:11.097 回答