<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和children的位置来隐藏溢出的子内容 . 我的代码出了什么问题?请帮助我 .
2 回答
图形的纵横比(1200:400)与viewBox(400:250)的纵横比不匹配,因此默认设置是保留viewBox内容的aspect ratio并显示多于图形中的内容 .
您可以添加preserveAspectRatio =“none”,但这会扭曲绘图,您可以使其保留AspectRatio =“xMidYMid slice”,但这会使绘图更大 .
如果你只是希望右边的东西消失,你需要使用一个剪辑或clipPath来删除它 .
所有
viewBox
属性都告诉浏览器如何缩放内容以适合您指定的SVG大小 .在这种情况下,您告诉它缩放房间101的面积,使其适合1200x250的图像(宽度和高度) . 默认情况下,这将导致该区域在1200x250区域中水平居中 .
房间102仍将在右侧可见(在图像区域中从800到1200) . 什么都没有导致它被剪裁 . 103室 is 夹了,因为它偏离了右边缘 .
如果您只想显示Room 101,那么只需将最外面的SVG设置为width =“400”即可 . 如果你这样做,房间102将不可见,因为它现在将离开SVG的右边缘 .