SVG 路径命令怎么用？M/C/Q/A 每个命令的语法和原理详解
SVG 路径（<path>）是 SVG 中功能最强大的绘图元素，通过 d 属性里的一组命令来描述任意形状。无论是简单直线还是复杂曲线，都可以用路径命令精确表达。本文按命令类别逐一讲解每条命令的语法、坐标规则和实际绘制效果。
路径命令的基本规则
路径命令由一个字母加上若干数字组成，写在 <path> 元素的 d 属性中：
- 大写字母表示绝对坐标，数值参照 SVG 画布原点。
- 小写字母表示相对坐标，数值参照当前画笔位置（即上一条命令的终点）。
- 连续使用同一命令时，命令字母可省略，只写参数。
- 命令之间的空格和逗号可以省略，但保留空格有助于可读性。
可以把路径命令想象成一支虚拟画笔：M 把笔尖移到某个位置但不落笔，L、C、A 等命令则从当前位置画线到新位置，Z 把笔尖拉回起点闭合路径。
移动命令 M / m
M 是每条路径的起点，把画笔移动到指定坐标，不产生线条。
M 50 50
这表示将画笔移到绝对坐标 (50, 50)。小写 m 10 0 则表示从当前位置向右移动 10 个单位。路径必须以 M 或 m 开头，否则浏览器无法确定起始位置。
直线命令 L / H / V
L —— 画直线到指定点
L x y 从当前位置画一条直线到 (x, y)，是最常用的画线命令。
M 10 10 L 90 90
这条路径从 (10, 10) 画直线到 (90, 90)。小写 l dx dy 表示相对偏移，l 80 80 与上面的效果相同。
H / V —— 画水平线或垂直线
当只需要沿一个轴画线时，用 H 或 V 比 L 更简洁：
H x：画水平线到 x 坐标，y 坐标不变。V y：画垂直线到 y 坐标，x 坐标不变。
M 10 10 H 90 V 90 H 10 Z
这个路径画了一个矩形：从 (10,10) 水平画到 (90,10)，垂直画到 (90,90)，水平画到 (10,90)，最后 Z 闭合回起点。
三次贝塞尔曲线 C / S
C —— 两个控制点的曲线
三次贝塞尔曲线是路径中最常用的曲线命令，语法为：
C x1 y1, x2 y2, x y
它需要两个控制点 (x1, y1) 和 (x2, y2) 以及一个终点 (x, y)。起点是上一条命令的终点。控制点不在曲线上，它们像磁铁一样把曲线拉向自己的方向：
- 第一个控制点 (x1, y1) 决定曲线离开起点时的切线方向。
- 第二个控制点 (x2, y2) 决定曲线进入终点时的切线方向。
M 10 80 C 40 10, 65 10, 95 80
这条曲线从 (10, 80) 出发，被第一个控制点 (40, 10) 向左上方拉，又被第二个控制点 (65, 10) 从右上方拉向终点 (95, 80)，形成一个 S 形弧线。
S —— 平滑三次贝塞尔曲线
当需要连续画多段曲线并保持衔接处平滑时，用 S 可以省略一个控制点：
S x2 y2, x y
S 会自动将前一段曲线的第二个控制点关于当前起点做对称，作为本段曲线的第一个控制点。这样就保证了连接处的切线方向一致，曲线不会出现尖角。
M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80
第二段曲线的第一个控制点自动取 (125, 150)——即前一段第二控制点 (65, 10) 关于 (95, 80) 的对称点。
如果 S 不是跟在 C 或 S 后面，它的第一个控制点会和起点重合，退化为二次贝塞尔曲线的效果。
二次贝塞尔曲线 Q / T
Q —— 一个控制点的曲线
二次贝塞尔曲线只需一个控制点，语法更简单：
Q x1 y1, x y
控制点 (x1, y1) 同时影响起点和终点的切线方向。曲线弯曲程度比三次贝塞尔曲线弱，适合画简单的弧线。
M 10 80 Q 95 10, 180 80
T —— 平滑二次贝塞尔曲线
和 S 的思路一致，T 自动推算控制点：
T x y
T 会取前一段 Q 或 T 的控制点关于当前起点的对称点作为新的控制点，保证平滑衔接。
M 10 80 Q 95 10, 180 80 T 350 80
如果 T 不是跟在 Q 或 T 后面使用，控制点会和终点重合，画出直线。
椭圆弧命令 A
椭圆弧是路径命令中最复杂的一个，语法为：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
七个参数的含义：
| 参数 | 含义 |
|---|---|
| rx, ry | 椭圆的 x 方向和 y 方向半径 |
| x-axis-rotation | 椭圆的旋转角度（度数） |
| large-arc-flag | 0 画小弧（小于 180°），1 画大弧（大于 180°） |
| sweep-flag | 0 逆时针方向，1 顺时针方向 |
| x, y | 弧线终点坐标 |
理解椭圆弧的关键在于：给定起点、终点和椭圆半径，实际上存在四条可能的弧线。large-arc-flag 决定选大弧还是小弧，sweep-flag 决定画弧的方向，两个标志组合起来唯一确定一条弧线。
M 80 80 A 45 45 0 0 0 125 125
这条弧线以 45×45 的圆（rx=ry 即为圆弧），不旋转，选择小弧、逆时针方向，从 (80,80) 画到 (125,125)。
如果把 large-arc-flag 改为 1，会画出同一起终点之间大于 180° 的那段弧：
M 80 80 A 45 45 0 1 0 125 125
闭合路径 Z
Z 或 z 从当前位置画一条直线回到路径起点，闭合整条路径。大小写效果相同。
M 10 10 L 90 10 L 50 90 Z
这画了一个三角形，Z 自动从 (50, 90) 连回 (10, 10)。闭合路径对于绘制填充图形（fill 不为 none）尤为重要——未闭合的路径在填充时浏览器会自动补一条闭合线，但可能出现渲染差异，建议显式闭合。
命令速查表
| 命令 | 名称 | 参数 | 说明 |
|---|---|---|---|
| M/m | 移动 | x y | 移动画笔，不画线 |
| L/l | 直线 | x y | 画直线到指定点 |
| H/h | 水平线 | x | 画水平线 |
| V/v | 垂直线 | y | 画垂直线 |
| C/c | 三次贝塞尔 | x1 y1, x2 y2, x y | 两个控制点的曲线 |
| S/s | 平滑三次贝塞尔 | x2 y2, x y | 自动推算第一控制点 |
| Q/q | 二次贝塞尔 | x1 y1, x y | 一个控制点的曲线 |
| T/t | 平滑二次贝塞尔 | x y | 自动推算控制点 |
| A/a | 椭圆弧 | rx ry rot large sweep x y | 椭圆弧线 |
| Z/z | 闭合 | 无 | 回到起点 |
常见问题
相对坐标什么时候用？ 当路径需要平移或复用时，相对坐标更方便——只需改 M 的起点，后续命令自动跟随。手写简单图形时绝对坐标更直观。
S 和 T 在什么时候会退化？ 如果 S 不是紧跟 C 或 S，第一个控制点会与起点重合；T 不是紧跟 Q 或 T 时同理，画出来是直线。
弧线的 large-arc-flag 和 sweep-flag 怎么选？ 先确定需要大弧还是小弧（看弧线是否超过半圆），再确定绘制方向。两个标志各有两种取值，共四种组合，只有一种符合你要的弧线。