绘制贝塞尔曲线

路径元素不仅能提供基本语义化SVG标签的加密实现，还能绘制更多复杂图形，其中就包括贝塞尔曲线。

存在多种不同的曲线命令，这里引入了点和控制点的概念。虽然贝塞尔数学绘图超出本文范围，但SVG允许我们无需额外计算即可绘制带有一个控制点的二次曲线和带有两个控制点的三次曲线。

控制点是什么？控制点是控制曲线弧度的操纵柄位置，它本身不会被绘制。理解这些路径命令的最佳方式是将它们渲染成像Affinity和Illustrator那样的GUI界面。

二次贝塞尔曲线：Q和T命令

Q命令用于绘制二次贝塞尔曲线，需要两个参数：控制点和终点。

1

const path = `M${start.x} ${start.y} Q${control.x} ${control.y} ${end.x} ${end.y}`;

由于我们有控制点、起点和终点，实际上可以像图形程序那样轻松渲染单个操纵柄路径。

有趣的是，在大多数常见GUI中，你可能从未像操作三次曲线那样与二次贝塞尔曲线交互过！大多数常见程序在你想要操作时都会将此曲线转换为带有两个操纵柄和控制点的三次曲线。

连接的贝塞尔曲线称为"样条"。当链接多个二次曲线时，有一个额外的T命令。

T命令用于绘制连接到前一个曲线的曲线，因此它必须跟在Q命令（或另一个T命令）之后。它只需要一个参数：曲线的终点。

1

const path = `M${p1.x} ${p1.y} Q${cP.x} ${cP.y} ${p2.x} ${p2.y} T${p3.x} ${p3.y}`

T命令实际上会使用我们Q命令中控制点cP的信息。推断的操纵柄用绿色绘制，而指定的控制点仍用红色渲染。

二次贝塞尔曲线是"弯曲度较小"的类型，这些曲线始终保持与"u"或"n"形状相关，无法被操纵成扭曲形状，但可以被挤压。

q和t命令也存在，它们使用相对坐标。

三次贝塞尔曲线：C和S命令

三次贝塞尔曲线的工作原理基本与二次曲线类似，但不是有一个控制点，而是有两个。这可能是你最熟悉的曲线类型。

顺序是：从第一个控制点开始，然后是第二个控制点，最后是终点。

1

const path = `M${p1.x} ${p1.y} C${cP1.x} ${cP1.y} ${cP2.x} ${cP2.y} ${p2.x} ${p2.y}`;

三次贝塞尔曲线是变形大师，与二次曲线不同，它可以卷曲形成环状，并呈现出与其他任何SVG元素完全不同的形状。它可以将填充区域分成两部分，而二次曲线不能。

就像T命令一样，三次曲线也有一个反射命令S。使用它时，我们通过反射获得第一个控制点，同时可以定义新的末端控制点和终点。与之前一样，这需要样条，因此至少需要一个前面的C（或S）命令。

1
2
3
4
5

const path = `    
  M ${p0.x} ${p0.y}
  C ${c0.x} ${c0.y} ${c1.x} ${c1.y} ${p1.x} ${p1.y}
  S ${c2.x} ${c2.y} ${p2.x} ${p2.y}
`;

何时使用T和S命令

使用这些链式反射命令的最大优势是，如果你想绘制波浪线，或者绝对确保样条连接平滑。

如果你不能使用反射但想要获得平滑的连接，请确保你的控制点形成一条直线。如果操纵柄有扭结，你的样条也会出现扭结。

圆弧：A命令

最后一种路径命令类型是创建圆弧。圆弧是圆或椭圆的部分。

这是我最不喜欢的命令，因为它包含太多元素。但它是绘制正确圆环图的秘诀，所以我在这方面花了一些时间。

圆弧路径如下所示：

1

const path = `M${start.x} ${start.y} A${radius.x} ${radius.y} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;

这些参数的含义是：

• xAxisRotation：底层椭圆轴线的旋转角度（度）
• largeArcFlag：布尔值，决定圆弧是否大于180°
• sweepFlag：布尔值，决定圆弧方向（顺时针或逆时针）

半径大小

半径大小仅在起点和终点适合指定椭圆时才被考虑。这种行为让我感到惊讶，因此我深入研究了规范，找到了关于圆弧工作原理的以下信息：

“允许所有椭圆弧参数（布尔标志除外）使用任意数值，但用户代理在渲染曲线或计算其几何时必须对无效值进行以下调整：

如果段的端点(x, y)与当前点相同（例如，前一个段的端点），则这相当于完全省略椭圆弧段。

如果rx或ry为0，则此弧被视为连接端点的直线段（“lineto”）。

如果rx或ry有负号，则将其丢弃；使用绝对值。

如果rx、ry和x轴旋转导致无解（基本上，椭圆不够大，无法从当前点到达新端点），则椭圆均匀缩放，直到恰好有一个解（直到椭圆刚好足够大）。”

因此，堆叠实际上只是优雅的错误处理，而不是其本意。

x轴旋转

交叉阴影图案显示xAxisRotation。椭圆围绕其中心旋转，度数值相对于SVG的x方向。

如果你使用圆形椭圆，旋转不会对弧产生影响（除非你像我那样在图案中使用它）。

扫描标志

小箭头标记显示圆弧绘制方向。如果值为0，圆弧顺时针绘制；如果值为1，圆弧逆时针绘制。

大弧标志

大弧标志告诉路径你是想要椭圆的较小弧还是较大弧。如果我们有缩放情况，我们会得到椭圆的恰好180°。

圆弧通常需要比我乐意做的更烦人的圆形数字处理（一旦弧度开始出现，我往往会陷入需要重新学习太多数学的兔子洞）。

它们更依赖于数值之间的相互关系，才能使结果符合预期，而且信息量太大。

但是——这是一个重要的但是——圆弧功能非常强大！

结论

希望你现在开始看到路径命令的实用性。我发现它们在说明数据时极其有用。

一旦你知道设置网格、盒子和曲线等东西有多容易，创建比标准数据可视化库提供的更独特的可视化效果就不需要太多步骤了。

通过本系列文章学到的所有内容，你基本上已经具备了渲染所有不同类型图表或其他类型可视化的能力。

SVG有趣而奇特，路径元素可能包含你在代码检查中见过的最令人眼花缭乱的符号串。但是，如果你花时间理解底层逻辑，它都会转化为一个美丽简单且极其强大的语法。

如果你想获得更多不需要深入研究规范资源，可以尝试MDN关于路径的教程。它简短紧凑，是我学习所有这些内容的主要资源。

自从我写了这个主题的深度解析后，我偶然发现了美丽的svg-tutorial.com，它在整体上很好地可视化了SVG编码，但主要展示了我最喜欢的圆弧可视化——圆弧编辑器。如果你有一个路径想要正确解码而不必存储这两篇文章中的所有信息，有SVG路径可视化器可以很好地分解路径信息。

现在：前进吧，在矩阵中玩得开心！