第 13 天：如何用 SVG 画铃铛

让我们再举一个三次和二次Bezier的例子。

在这里，这个钟的底部是用直线定义的。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  stroke="black"
  stroke-width="2"
>
  <path
    d="
      M -50 40
      L -50 50
      L 50 50
      L 50 40"
    fill="#FDEA96"
  />
</svg>

然后，二次贝济耶开始钟形钟冠。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  stroke="black"
  stroke-width="2"
>
  <path
    d="
      M -50 40
      L -50 50
      L 50 50
      L 50 40
      Q 40 40 40 10"
    fill="#FDEA96"
  />
</svg>

然后用立方贝塞尔线将该线条延续，形成钟形的顶部。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  stroke="black"
  stroke-width="2"
>
  <path
    d="
      M -50 40
      L -50 50
      L 50 50
      L 50 40
      Q 40 40 40 10
      C 40 -60 -40 -60 -40 10"
    fill="#FDEA96"
  />
</svg>

然后，我们用另一条与前一条相呼应的二次贝塞尔曲线到达底部。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
  stroke="black"
  stroke-width="2"
>
  <path
      d="
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10
        Q -40 40 -50 40"
      fill="#FDEA96"
    />
</svg>

最后，我们为钟加上两个圆圈，作为钟坠和挂环。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <g stroke="black" stroke-width="2">
    <circle cx="0" cy="-45" r="7" fill="#4F6D7A" />
    <circle cx="0" cy="50" r="10" fill="#F79257" />
    <path
      d="
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10
        Q -40 40 -50 40"
      fill="#FDEA96"
    />
  </g>
</svg>
分享：