第十天：如何使用 SVG 画一个雪人

图形的填充可以定义为梯度渐变色。在这里，我们在 defs 部分定义了一个 radialGradient。它的语法与 CSS 不同，但功能非常相似。

我们要定义它的 ID、以 cx 和 cy 为中心的位置、设置弧度和stop颜色。然后，我们就可以将其作为形状的fill 属性。

<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  style="background-color: lightblue"
>
  <defs>
    <radialGradient 
      id="snowball" 
      cx="0.25" 
      cy="0.25" 
      r="1"
    >
      <stop 
        offset="0%" 
        stop-color="white"
      />
      <stop 
        offset="50%" 
        stop-color="white" 
      />
      <stop 
        offset="100%" 
        stop-color="#d6d6d6" 
      />
    </radialGradient>
  </defs>

  <circle 
    cx="0" 
    cy="0" 
    r="80" 
    fill="url(#snowball)" 
  />
</svg>

对于雪人，我们用相同的径向渐变绘制两个圆来构成雪人的身体。然后，我们为鼻子添加一个多边形，为眼睛添加两个圆，为手臂添加两条线。很简单。

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <defs>
    <radialGradient id="snowball" cx="0.25" cy="0.25" r="1">
      <stop offset="0%" stop-color="white" />
      <stop offset="50%" stop-color="white" />
      <stop offset="100%" stop-color="#d6d6d6" />
    </radialGradient>
  </defs>

  <circle cx="0" cy="60" r="80" fill="url(#snowball)" />
  <circle cx="0" cy="-40" r="50" fill="url(#snowball)" />
  <polygon points="10,-46 50,-40 10,-34" fill="#e66465" />

  <circle cx="0" cy="-55" r="5" />
  <circle cx="20" cy="-55" r="5" />

  <line x1="-40" y1="30" x2="-90" y2="-30" stroke="black" stroke-width="5" />
  <line x1="-65" y1="0" x2="-90" y2="-10" stroke="black" stroke-width="5" />
</svg>
分享：