SVG <path> 精通指南：从基础指令到复杂曲线的深度解析

SVG <path> 元素是创建复杂矢量图形的关键，尽管其语法初看令人费解，但掌握后能实现平滑曲线等高级效果。

核心洞察在于 <path> 元素的 `d` 属性，它是一系列绘图指令的集合。'M'（Move）指令用于定位画笔，不绘制；'L'（Line）指令绘制直线。指令间通过继承前一个命令的终点实现连续绘制，而非独立执行。指令参数间的逗号和空格虽非必需，但强烈建议保留以提高可读性，这对团队协作及未来维护至关重要，且对文件大小影响微乎其微。

SVG <path> 支持多种绘图指令，包括直线、二次贝塞尔曲线（Q）和三次贝塞尔曲线（C）。二次贝塞尔曲线由起点、一个控制点和终点定义，用于创建简单的弯曲；三次贝塞尔曲线则有两个控制点，提供更精细的形状控制，尤其适用于S形或需要高精度曲线的场景。

最复杂的莫过于椭圆弧（A）命令。它连接起点和终点，但需浏览器计算一个包含这两点的虚拟椭圆。`rx`和`ry`定义此虚拟椭圆的水平和垂直半径，影响弧的深度。`large-arc-flag`（0或1）选择短弧或长弧，`sweep-flag`（0或1）则决定了绘制方向（顺时针或逆时针）。`rotation`参数用于旋转虚拟椭圆，但实际应用中较少直接使用，通常通过CSS transform实现整体旋转。

此外，`Z`命令用于闭合路径，绘制一条连接到起点的直线。命令的大小写区分至关重要：大写表示绝对坐标，小写表示相对坐标，后者基于前一指令的终点进行偏移，便于平移操作。

在曲线连接处，`T`（平滑二次贝塞尔）和`S`（平滑三次贝塞尔）命令可自动推导控制点，确保曲线连接的流畅性，避免“肘部”效应。尽管如此，对于复杂的多段曲线，使用图形设计软件导出SVG路径可能更为高效。

掌握SVG <path> 元素及其指令，是实现高级网页图形和交互动画的基础，尤其在Web动画开发中具有不可替代的作用。

An Interactive Guide to SVG Paths • Josh W. Comeau

SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of the cool things we can do with it!

Josh W. Comeau