第 15 天：如何使用 SVG 绘制头饰丝带

在学习了二次方贝塞尔曲线和三次方贝塞尔曲线之后，让我们再进行一次练习，同时使用这两种曲线。

我们从色带右侧的二次贝塞尔曲线开始。点再次代表控制点。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45"
    fill="#B73A3B"
  />
</svg>

然后，我们继续绘制立方体贝塞尔曲线。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45
      C 96 -48 96 48 56 45"
    fill="#B73A3B"
  />
</svg>

最后是另一个与第一个相似的二次方贝塞尔曲线。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45
      C 96 -48 96 48 56 45
      Q 28 40 0 20"
    fill="#B73A3B"
  />
</svg>

然后，我们可以将整个形状移动到一个可重复使用的组件中，并将其用于两种尺寸。请注意，为了将其镜像到左侧，我们使用了负缩放。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <defs>
    <path
      id="ribbon"
      d="
        M 0 -20
        Q 28 -40 56 -45
        C 96 -48 96 48 56 45
        Q 28 40 0 20"
      fill="#B73A3B"
    />
  </defs>

  <use href="#ribbon" />
  <use 
    href="#ribbon"
    transform="scale(-1)" 
  />
</svg>

最后，我们在中间添加一个ellipse元素，并在其余部分添加描边。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path
      id="ribbon"
      d="
        M 0 -20
        Q 28 -40 56 -45
        C 96 -48 96 48 56 45
        Q 28 40 0 20"
      fill="#B73A3B"
    />
  </defs>

  <use href="#ribbon" />
  <use href="#ribbon" transform="scale(-1)" />
  <ellipse cx="0" cy="0" rx="20" ry="24" fill="#9C2D2A" />

  <path
    d="
      M 0 20
      Q 40 40 30 60
      Q 20 80 40 90

      M 0 20
      Q -30 30 -20 60
      Q -10 90 -50 100"
    fill="none"
    stroke="#B73A3B"
    stroke-width="3"
  />
</svg>
分享：