解码SVG路径元素：曲线与圆弧命令

在SVG路径元素解码系列的第一部分中，我们主要处理了将语义标签（line、polyline、polygon）转换为路径命令语法的问题，但路径元素并没有真正提供任何新的形状选项。本文将改变这一情况，我们将学习如何绘制曲线和圆弧，这些只是椭圆的一部分。

绘制贝塞尔曲线

能够绘制线条、多边形、折线以及它们的组合版本都很有趣，但路径还可以做更多事情，而不仅仅是提供基本语义SVG标签的更神秘实现。

其中一种附加类型是贝塞尔曲线。

有多种不同的曲线命令。这就是点和控制点的概念出现的地方。

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

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

对于一个简单的曲线，我们将以M移动到起点，然后Q绘制曲线：

1

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

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

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

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的信息。

三次贝塞尔曲线：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}
`;

圆弧：A命令

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

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

圆弧路径如下所示：

1

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

xAxisRotation、largeArcFlag和sweepFlag是什么？简而言之：

• xAxisRotation是基础椭圆轴的旋转角度（以度为单位）
• largeArcFlag是一个布尔值，确定圆弧是否大于180°
• sweepFlag也是一个布尔值，确定圆弧方向，是顺时针还是逆时针？

半径大小

你会注意到在CodePen中，每个命令都绘制了椭圆。在第一行中，它们是重叠的，而在第二行中，它们是堆叠的。两行实际上在其弧定义中使用了相同的radius.x和radius.y值，而起点和终点之间的距离在第二行中增加了。

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

xAxisRotation

在我们讨论布尔值之前，交叉阴影图案显示了xAxisRotation。椭圆围绕其中心旋转，度数值相对于SVG的x方向。

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

扫描标志（Sweep Flag）

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

大弧标志（Large Arc Flag）

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

结论

好了，内容很多！然而，我希望你开始看到路径命令有多么有用。我发现它们在说明数据时非常有用。

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

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

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