本教程使用了两个 SVG 图像 － 一个表示办公大楼的一楼部分，而第二个 SVG 图像表示二楼对应的房间。每个 SVG 图像都嵌套在 HTML 页面中。我先手工创建一楼的图像，这样我才有可以处理的对象。

SVG 图像以 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>

请注意，名称空间的声明指定了这些 SVG 元素位于 SVG 名称空间内，编写这些元素时无需带任何名称空间的前缀。

整个 SVG 图像宽 1200 像素，高 250 像素，视区宽 400 像素，高 250 像素，如 viewBox 属性所示。viewBox 属性的第一和第二个值指出视区左上角位于 (0,0)。viewBox 属性的第三和第四个值指出视区的右下角位于 (400,250)。用户无法看到图像在该视区以外的任何部分。每个房间宽 400 像素，高 250 像素，所以刚开始时该视区只能容纳一个房间。

再次声明，视区只是 SVG 图像中可见的那一部分。在本教程的后面，我将使用 ECMAScript 操纵 viewBox 属性的内容，使得可以向左或向右滚动 SVG 图像。

三个房间中的每一间开始时宽 400 像素，高 250 像素，代表房间宽 40 英尺，深 25 英尺。接下来，我将向您展示如何添加这些房间。