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

当我们开始使用曲线时，path元素就会变得非常强大。二次贝塞尔曲线就是其中之一。我们不仅要设置端点，还要设置控制点。

控制点是一个不可见的坐标，直线向其弯曲，但并不接触它。看看这张快乐的脸！这里的隐形控制点位于图像底部的中间（0,100 处）。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle cx="-50" cy="-50" r="20" />
  <circle cx="50" cy="-50" r="20" />
  <path 
    d="
      M -70,50 
      Q 0,100 70,50" 
    fill="none" 
    stroke="black" 
    stroke-width="10" 
    stroke-linecap="round" 
  />
</svg>

在上述示例中，控制点与两个端点的距离相同。但这是不必要的。在下面的示例中，我们用一个圆来标记控制点。请注意，控制点和圆的坐标相同。

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

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

在今天的示例中，我们有一系列二次方折线，随着路径的下降，控制点离树的中心越来越远。

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <path
    d="
      M 0 -80
      Q 5 -75 0 -70
      Q -10 -65 0 -60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30 -25 0 -20
      Q 35 -15 0 -10
      Q -40 -5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="#0C5C4C"
    stroke-width="5"
  />
</svg>

如果我们把上面的每个二次方程贝塞尔线分解成坐标相同的两条线段，就会是这样：

<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <path 
    d="
      M 0 -80
      L 5 -75 L 0 -70
      L -10 -65 L 0 -60
      L 15 -55 L 0 -50
      L -20 -45 L 0 -40
      L 25 -35 L 0 -30
      L -30 -25 L 0 -20
      L 35 -15 L 0 -10
      L -40 -5 L 0 0
      L 45 5 L 0 10
      L -50 15 L 0 20
      L 55 25 L 0 30
      L -60 35 L 0 40
      L 65 45 L 0 50
      L -70 55 L 0 60
      L 75 65 L 0 70
      L -80 75 L 0 80
      L 85 85 L 0 90
      L -90 95 L 0 100
      L 95 105 L 0 110
      L -100 115 L 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="black"
  />
</svg>
分享：