svg viewBox attribute moves children position

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>

When I trying to use viewBox attribute on outer svg tag, viewBox doesn't crop viewport but just move children position. I wanna hide overflow child content by using viewBox and children's position. What's wrong with my code? plz help me.

score 0 · Answer 1 · answered Nov 02 '14 at 13:16

The aspect ratio of the drawing (1200:400) does not match the aspect ratio of the viewBox (400:250) as such the default is to preserve the aspect ratio of the viewBox contents and show more than that in the drawing.

You could add preserveAspectRatio="none" but that would distort the drawing, you could make it preserveAspectRatio="xMidYMid slice" but that will make the drawing bigger.

If you just want the stuff on the right to disappear you'll need to use a clip or clipPath to remove it.

score 0 · Answer 2 · answered Nov 02 '14 at 13:16

All the viewBox attribute does is tell the browser how to scale the content to fit the SVG size you specify.

In this case, you are telling it to scale the area of Room 101 so that it fits in a 1200x250 image (the width and height). By default, this will result in that area being centred horizontally in the 1200x250 area.

enter image description here

Room 102 will still be visible to the right of that (in the image area from 800 to 1200). There is nothing to cause it to be clipped. Room 103 is clipped, because it is off the right edge.

If you only want to show Room 101, then just set the outermost SVG to width="400". If you do that, Room 102 will not be visible because it now will be off the right edge of the SVG.

enter image description here

svg viewBox attribute moves children position

2 Answers2