svg viewBox属性移动儿童位置

Question

<svg xmlns="http://www.w3.org/2000/svg" width="1200px" height="250px" viewBox="0 0 400 250" id="RoomsSVG"> 
    <svg id="Room101" width="400px" height="250px" x="0px" y="0px"> 
     <rect id="Room101Rect" width="100%" height="100%" fill="orange" stroke="black" stroke-width="5" /> 
     <text id="Room101Label" font-size="24pt" x="55px" y="100px" fill="black">Room 101</text> 
     <text id="Room101Type" font-size="24pt" x="55px" y="150px" fill="black">Standard office</text> 
    </svg> 
    <svg id="Room102" width="400px" height="250px" x="400px" y="0px"> 
     <rect id="Room102Rect" width="100%" height="100%" fill="orange" stroke="black" stroke-width="5" /> 
     <text id="Room102Label" font-size="24pt" x="55px" y="100px" fill="black">Room 102</text> 
     <text id="Room102Type" font-size="24pt" x="55px" y="150px" fill="black">Standard office</text> 
    </svg> 
    <svg id="Room103" width="400px" height="250px" x="800px" y="0px"> 
     <rect id="Room103Rect" width="100%" height="100%" fill="orange" stroke="black" stroke-width="5" /> 
     <text id="Room103Label" font-size="24pt" x="55px" y="100px" fill="black">Room 103</text> 
     <text id="Room103Type" font-size="24pt" x="55px" y="150px" fill="black">Standard office</text> 
    </svg> 
</svg> 

当我试图在外部svg标签上使用viewBox属性时，viewBox不裁剪视口，但只是移动儿童的位置。 我想通过使用viewBox和儿童的位置隐藏溢出的子内容。 我的代码有什么问题？ plz帮助我。

Answer 1

图形的纵横比（1200：400）与viewBox（400：250）的纵横比不匹配，因此默认情况下将保留viewBox内容的aspect ratio，并在图形中显示更多。

您可以添加preserveAspectRatio =“none”，但这会扭曲绘图，您可以将它保留为AspectRatio=“xMidYMid slice”，但这会使绘图更大。

如果您只是想让右侧的内容消失，您需要使用剪辑或clipPath将其删除。

Answer 2

所有viewBox属性都会告诉浏览器如何缩放内容以适应您指定的SVG大小。

在这种情况下，您要让它缩放房间101的面积，使其适合1200x250的图像（宽度和高度）。默认情况下，这将导致该区域在1200x250区域中水平居中。

室102仍然将是那（800〜1200中的图像区域）的右侧可见。没有什么可以导致它被剪辑。 103号房间是削减，因为它是在右边缘。

如果您只想显示房间101，那么只需将最外面的SVG设置为width =“400”。如果你这样做，102房间将不可见，因为它现在将离开SVG的右边缘。