前言
本文梳理了 SVG 路径（path）命令的核心语法与用法，带你快速了解命令的绝对/相对坐标、参数含义，并通过简短示例建立直觉，便于在日常图形绘制与调试中查阅。
语法规则
- 所有指令均由单个字符表示（例如 MoveTo 对应
M）。 - 多余的空白和分隔符（如逗号）可省略，例如
M 100 100 L 200 200可写作M100 100L200 200。 - 若连续出现相同类型命令，后续的命令字母可省略，例如
M 100 200 L 200 100 L -100 -200可写作M 100 200 L 200 100 -100 -200。 - 大部分命令同时提供绝对坐标与相对坐标两种形式（大写=绝对，小写=相对）。
- 语法说明：
()表示参数分组；+表示“至少一次（1 次或更多）”。例如：L (x y)+表示至少一个坐标点对。
指令介绍
M/m — MoveTo（移动到）
- 格式：
M (x y)+/m (dx dy)+ - 规则：以 (x, y) 为起点开启一段子路径；额外坐标点将被隐式解析为后续的 L/l 命令，坐标体系也将隐式沿用（M 对应 L，m 对应 l）。
- 示例：
M10 10 40 10 40 40等价M10 10 L40 10 L40 40m10 10 30 0 0 30等价m10 10 l30 0 l0 30
Z/z — ClosePath（闭合）
- 格式：
Z/z（无参数，大小写等价） - 规则：从当前点到初始点绘制一条直线，长度可以为 0。若其后紧跟 MoveTo，则标识下一个子路径的起点；若紧跟其他命令，则下一个子路径以当前位置为起点（与当前子路径起点相同）。
L/l — LineTo（直线到）
- 格式：
L (x y)+/l (dx dy)+ - 规则：从当前点到 (x, y) 绘制一条直线，可提供多个坐标对以绘制折线；当前点更新为最后的终点。
- 示例：
L40 10 40 40 10 40；l30 0 0 30 -30 0
H/h — Horizontal LineTo（水平）
- 格式：
H (x)+/h (dx)+ - 规则：从当前点绘制一条水平线，可以提供多个 x 值（实际意义不大）。
- 示例（当前点 10,20）：
H60 90；h50 30
V/v — Vertical LineTo（垂直）
- 格式：
V (y)+/v (dy)+ - 规则：从当前点绘制一条垂直线，可以提供多个 y 值（实际意义不大）。
- 示例（当前点 60,20）：
V50 10；v30 -40
C/c — Cubic Bézier（三次贝塞尔曲线）
- 格式：
C (x1 y1 x2 y2 x y)+/c (dx1 dy1 dx2 dy2 dx dy)+ - 规则：从当前点到 (x, y) 绘制一条三次贝塞尔曲线，以 (x1, y1) 作为起点侧控制点，以 (x2, y2) 作为终点侧控制点。
- 示例（当前点 10,80）：
C40 10 80 10 110 80；c30 -70 70 -70 100 0
S/s — Smooth Cubic（平滑三次贝塞尔曲线）
- 格式：
S (x2 y2 x y)+/s (dx2 dy2 dx dy)+ - 规则：从当前点到 (x, y) 绘制三次贝塞尔；若前一命令为 C/c/S/s，则第一个控制点取“上一段第二控制点相对当前点的镜像”（cp1 = 2 * current - prevCp2）；否则第一个控制点 = 当前点；(x2, y2) 为终点侧控制点；可多组串联。
- 示例：
S180 150 210 80；s70 70 100 0
Q/q — Quadratic Bézier（二次贝塞尔曲线）
- 格式：
Q (x1 y1 x y)+/q (dx1 dy1 dx dy)+ - 规则：从当前点到 (x, y) 绘制二次贝塞尔曲线，(x1, y1) 为控制点。
- 示例（当前点 10,60）：
Q60 10 110 60；q50 -50 100 0
T/t — Smooth Quadratic（平滑二次贝塞尔曲线）
- 格式：
T (x y)+/t (dx dy)+ - 规则：从当前点到 (x, y) 绘制二次贝塞尔；若前一命令为 Q/q/T/t，则控制点取“上一段控制点相对当前点的镜像”；否则控制点 = 当前点；可多组串联。
- 示例：
T210 60；t100 0
A/a — Arc（椭圆弧）
- 格式：
A (rx ry xAxisRotation largeArcFlag sweepFlag x y)+/a (rx ry xAxisRotation largeArcFlag sweepFlag dx dy)+ - 规则：从当前点到 (x, y) 绘制椭圆弧，椭圆的大小与方向由 (rx, ry) 与
xAxisRotation参数决定。xAxisRotation表示椭圆整体相对于当前坐标系的旋转角度。largeArcFlag和sweepFlag用于圆弧的选择，参考如下示例。 a100,50 0 ?,? 100,50中“?”是largeArcFlag和sweepFlag的占位符，不同的取值对应的圆弧效果如下图。
