第 16 天：如何用 SVG 画一只小熊

作为终极绘画挑战，让我们来画一只小熊吧。

我们从耳朵开始。这是两个都设置了填充和描边属性的圆形。我们还在 SVG 元素上定义了一个类来设置背景颜色。注意，这里我们设置的是常规的背景色 CSS 属性，而不是填充属性。填充适用于形状，但 SVG 元素本身并不是形状。

<svg 
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle 
    class="ear"
    cx="-40" 
    cy="-50" 
    r="18" 
  />
  <circle 
    class="ear"
    cx="40" 
    cy="-50" 
    r="18" 
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .ear {
  fill: #e5c39c;
  stroke: white;
  stroke-width: 5;
}

然后再加上脸和眼睛。还有一件事我们之前没有介绍过。之前我们看到可以使用 rx 属性将矩形变圆。我们还可以使用 ry 属性在 Y 轴上设置不同的半径。如果没有设置后者，就会返回到另一个半径。

<svg 
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <rect 
    class="face"
    x="-55"
    y="-60"
    width="110"
    height="120" 
     rx="50"
     ry="30"
  />
  <circle cx="20" cy="-30" r="3" />
  <circle cx="-20" cy="-30" r="3" />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .face {
  fill: white;
}

最后，我们可以将鼻子和嘴巴添加为以下几条路径。

<svg 
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -30 0
      C -30 -25 30 -25 30 0
      L 30 30
      Q 30 40 20 40
      L -20 40
      Q -30 40 -30 30"
    fill="#E5C39C"
  />
  <path
    d="
      M -10 0
      L 10 0
      C 10 20 -10 20 -10 0"
  />
  <path
    class="mouth"
    d="
      M 0 10
      Q 0 25 10 25

      M 0 10
      Q 0 25 -10 25"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

最后，我们将所有内容组合在一起，就得到了左边的图片。

<svg class="bear" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="ear" cx="-40" cy="-50" r="18"></circle>
  <circle class="ear" cx="40" cy="-50" r="18"></circle>

  <rect class="face" x="-55" y="-60" width="110" height="120" rx="50" ry="30" />
  <circle cx="20" cy="-30" r="3" />
  <circle cx="-20" cy="-30" r="3" />

  <path
    d="
      M -30 0
      C -30 -25 30 -25 30 0
      L 30 30
      Q 30 40 20 40
      L -20 40
      Q -30 40 -30 30"
    fill="#E5C39C"
  />
  <path
    d="
      M -10 0
      L 10 0
      C 10 20 -10 20 -10 0"
  />
  <path
    class="mouth"
    d="
      M 0 10
      Q 0 25 10 25

      M 0 10
      Q 0 25 -10 25"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .ear {
  fill: #e5c39c;
  stroke: white;
  stroke-width: 5;
}

.bear .face {
  fill: white;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}