第四天：如何用SVG画一个房子

在此示例中，我们结合了迄今为止学到的所有内容。我们在这里使用圆形、矩形、直线、折线和多边形。

我们从正面开始。请注意，我们不仅在墙元素上有一个类，而且在整个 SVG 上也有一个类。

<svg 
  class="house"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <polygon
    class="wall"
    points="-65,80 -65,-10 0,-70 65,-10 65,80" 
  />
</svg>

.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

然后我们在它上面添加一个屋顶。这是这里唯一的新东西。我们使用polyline折线。折线和多边形之间的区别在于，多边形始终会自行闭合，而折线将保持开放状态。请注意，我们再次使用了stroke-linecap描边线帽属性，就像我们在姜饼图示例中所做的那样。

<svg 
  class="house"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <polyline
    class="roof"
    points="-75,-8 0,-78 75,-8" 
  />
</svg>

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 10px;
  stroke-linecap: round;
}

然后我们不断为门、窗和楼梯添加简单的元素。左侧图像的最终代码如下：

<svg class="house" width="200" height="200" viewBox="-100 -100 200 200">
  <polygon class="wall" points="-65,80 -65,-10 0,-70 65,-10 65,80" />
  <polyline class="roof" points="-75,-8 0,-78 75,-8" />

  <rect class="door" x="-45" y="10" width="30" height="60" rx="2" />
  <circle class="door-knob" cx="-35" cy="40" r="2" />
  <rect class="stair" x="-47" y="70" width="34" height="5" />
  <rect class="stair" x="-49" y="75" width="38" height="5" />

  <rect class="window" x="5" y="15" width="40" height="35" rx="5" />
  <line x1="5" y1="32.5" x2="45" y2="32.5" />
  <line x1="25" y1="15" x2="25" y2="50" />
  <rect class="window-sill" x="2" y="48" width="46" height="5" rx="5" />

  <circle class="window" cx="0" cy="-25" r="15" />
  <line x1="-15" y1="-25" x2="15" y2="-25" />
  <line x1="0" y1="-40" x2="0" y2="-10" />
</svg>

.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 10px;
  stroke-linecap: round;
}

.house .door {
  fill: #d1495b;
}

.house .stair {
  fill: gray;
}

.house .window {
  fill: #fdea96;
}

.house .window-sill {
  fill: #d1495b;
  stroke-linecap: round;
}