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的右邊緣。