第三天：如何使用SVG绘制姜饼图

将样式属性移至 CSS

由于我们的 SVG 现在位于 HTML 文件中，因此我们可以为每个标签元素分配 CSS 类，并将一些属性移至 CSS。但我们只能移动表现样式属性。位置属性和定义形状的属性必须保留在 HTML 中。但颜色、描边和字体属性可以移至 CSS。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle 
    class="head"
    cx="0"
    cy="-50"
    r="30" 
  />
</svg>

.head {
  fill: #cd803d;
}

圆角线条

我们已经看到了fill和一些stroke 属性，但这里还有另一个样式属性。stroke-linecap。这可以使我们的线端头变圆。请注意，这里的腿和手臂是简单的线条。

为了给你一个比较，如果我们去掉线端圆帽并设置较小的描边宽度，那么它会是这样的。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <line 
    class="limb"
    x1="-40"
    y1="-10"
    x2="40"
    y2="-10"
  />
  <line 
    class="limb"
    x1="-25"
    y1="50"
    x2="0"
    y2="-15"
  />
  <line 
    class="limb"
    x1="25"
    y1="50"
    x2="0"
    y2="-15"
  />
</svg>

.limb {
  stroke: #cd803d;
}

但是通过设置粗笔画宽度和圆线帽，我们可以根据我们的身材塑造腿部和手臂。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <line 
    class="limb"
    x1="-40"
    y1="-10"
    x2="40"
    y2="-10"
  />
  <line 
    class="limb"
    x1="-25"
    y1="50"
    x2="0"
    y2="-15"
  />
  <line 
    class="limb"
    x1="25"
    y1="50"
    x2="0"
    y2="-15"
  />
</svg>

.limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

圆角矩形

另外，请注意定义嘴部的矩形处的 rx 属性。这将使边缘变圆。它类似于常规 HTML 元素的 border-radius 属性。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle 
    class="head"
    cx="0"
    cy="-50"
    r="30" 
  />
  <rect
    class="mouth"
    x="-10"
    y="-40"
    width="20"
    height="5"
    rx="2"
  />
</svg>

.head {
  fill: #cd803d;
}

.mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

姜饼图

一旦我们把它们放在一起，并添加眼睛和按钮，最终的代码如下所示：

<svg class="gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="head" cx="0" cy="-50" r="30" />

  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />

  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />

  <circle class="button" cx="0" cy="-10" r="5" />
  <circle class="button" cx="0" cy="10" r="5" />
</svg>

.head {
  fill: #cd803d;
}

.eye {
  fill: white;
}

.mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

.limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}