因为这是有关 SVG 的教程，而不是有关内部装饰的教程，所以我就把每个房间表示成大小适当的矩形。

一楼三个房间（101 室、102 室和 103 室）中每一间的 SVG 代码都遵循相同的基本模式：

<?xml version='1.0'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<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="#CCCCFF"  
           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">
     ...
  </svg>

  <svg id="Room103" width="400px" height="250px" x="800px" y="0px">
     ...
  </svg>

</svg>

每个房间的代码都包含在嵌套的 svg 元素中，x 属性和 y 属性确定了该嵌套 svg 元素的位置。

现在回忆一下，该图像宽 1200 像素，但视区的宽只有 400 像素。下面我将使图像在视区中居中。