Question

以下是我的代码：

<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）。我不知道为什么？我已经修改了一个多小时，仍然如此。谁能告诉我原因？谢谢！

Answer 1

viewBox属性会剪切宽度为400且高度为500的矩形（在用户坐标中）。这意味着，只能看到最顶部的红色矩形，所有其他矩形都位于视图框之外。

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

使用svg绘制三个正方形并使它们成垂直排列

1 个答案: