理解 SVG 路径命令

问题

SVG 图标里的 d 属性常像一段压缩咒语：字母与数字黏在一起，很难看出图形如何生成。若把它重新排成命令序列，浏览器做的事其实很朴素——维护当前画笔位置，并按顺序执行移动、画线、画曲线和闭合操作。

路径命令执行器浏览器按顺序消费 d 属性中的命令。

已执行命令 0 / 5 将直线改为相对命令

M 28 94　L 72 34M 28 94　l 72 34

大写 L 前往绝对坐标 (72,34)；小写 l 从当前位置偏移 (72,34)。

0 条命令：画笔还没有移动。

命令字母像函数名，后面的数字像参数。M x y 移动画笔但不落墨，L x y 连接直线，C 用两个控制点和一个终点生成三次贝塞尔曲线，Z 回到当前子路径的起点。拖动滑块时，图形不是一次“出现”，而是命令累积的结果。

大小写决定坐标系。大写命令读取 SVG 原点下的绝对坐标；小写命令把参数视为相对当前点的位移。相同的 72 34 因此可能指向 (72,34)，也可能从 (28,94) 走到 (100,128)。

画笔状态记为当前位置 $p_i=(x_i,y_i)$ 与子路径起点 $s$ 。绝对直线更新为 $p_{i+1}=(x,y)$ ，相对直线则为：

p_{i+1}=p_i+(\Delta x,\Delta y).

三次贝塞尔曲线由起点 $P_0$ 、控制点 $P_1,P_2$ 和终点 $P_3$ 决定。用三次 Bernstein 基函数 $b_i(t)$ 可紧凑写成：

B(t)=\sum_{i=0}^{3}b_i(t)P_i.

逐步执行器让命令列表、当前画笔和最终轮廓保持同步。读者可先只执行 M，确认“移动不绘制”；再加入 L 和 C，观察每条命令只负责路径的一段；最后用 Z 闭合并产生可填充区域。

样稿没有覆盖水平/垂直线、二次曲线、平滑曲线与椭圆弧，也没有实现完整 path parser。控制点没有拖拽编辑，坐标网格仅用于解释，不承担像素级设计工具的职责。