第 12 天：如何使用 SVG 绘制三次贝塞尔曲线

当我们想要弯曲一条直线时，二次贝塞尔曲线是个不错的选择，但它往往不够灵活。使用三次贝塞尔曲线时，我们不仅有一个控制点，还有两个控制点。第一个控制点设定曲线的初始方向，第二个控制点定义曲线从哪个方向到达终点。

我们再来看一个例子，圆圈代表控制点。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M -50,50 
      C -60,-50 60,-50 50,50"
    fill="none"
    stroke="red"
  />
  <circle
    cx="-60" 
    cy="-50" 
    r="2" 
  />
  <circle 
    cx="60" 
    cy="-50"
    r="2" 
  />
</svg>

点击此处观看三次贝塞尔互动演示（在页面顶部选择三次贝塞尔）。

当我们想要延续一条直线的流向时，三次贝塞尔曲线是个不错的选择。如果控制点的方向与曲线前后直线的方向一致，那么我们就能在路径段之间实现平滑过渡。

在这个例子中，礼品盒的缎带使用了立方贝塞尔曲线，它平滑地延续了前一条直线，然后转回即将到来的直线方向。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path 
    d="
      M 0 0
      L 30 0
      C 50 0 50 -25 30 -15
      L 0 0"
    fill="none"
    stroke="red"
  />
  <circle cx="50" cy="0" r="2" />
  <circle cx="50" cy="-20" r="2" />
</svg>

除了贝塞尔曲线之外，这幅图的其余部分主要是几个长方形和一个圆形。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <circle cx="0" cy="-50" r="10" fill="#a9172a" />
  <rect class="box" x="-60" y="-40" width="120" height="100" />
  <rect class="box" x="-70" y="-47" width="140" height="20" />
  <rect class="stripe" x="-20" y="-40" width="40" height="100" />
  <rect class="stripe" x="-25" y="-47" width="50" height="20" />

  <path
    class="ribbon"
    d="
      M 0 -50
      L 30 -50
      C 50 -50 50 -70 30 -65
      L 0 -50"
  />

  <path
    class="ribbon"
    d="
      M 0 -50
      L -30 -50
      C -50 -50 -50 -70 -30 -65
      L 0 -50"
  />
</svg>

.gift .box {
  fill: #d1495b;
  stroke: black;
  stroke-width: 2px;
}

.gift .stripe {
  fill: white;
  stroke: black;
  stroke-width: 2px;
}

.gift .ribbon {
  stroke: #b73a3b;
  stroke-width: 4px;
  fill: none;
}