读懂 "M 10 10 L 90 90":path 微语言
path 字符串是一支画笔的移动记录：每个字母是一条命令，后面跟它要的坐标。画笔永远记着「当前点」，每条命令从当前点出发、画完把当前点挪到终点。就这么一套只有 10 个动词的微语言，撑起了 SVG 的 <path d>、CSS 的 path()，也是理解 shape() 的基础。
1 · 逐条命令的执行
选个图形，点 ▶ 或直接点下方命令，看当前段加粗高亮、贝塞尔曲线拉出橙色控制点辅助线：
大写与小写分别是绝对与相对坐标。L 70 130 画到坐标 (70, 130)，l 70 130 画到「当前点再往右 70、往下 130」。图 1-1 里「箭头（全小写）」那个图形整条都是相对命令，虚线框里的 token 即为小写。另有一条简写规则：一条命令后面跟了多组坐标时自动重复（M 后的多余坐标按
L 算），所以 M 0 0 10 10 20 5 展开后是三条命令。
2 · 10 个动词速查
3 · 它在 CSS 里的写法
CSS 不能裸写 path 串，要包进 path() 函数——一个带引号的字符串，前面还能加可选的 fill-rule（在 clip-path 进阶 §1 细讲）。但它只对 clip-path 这类裁剪语境有效：实测 Chrome 151 上
offset-path: path(evenodd, "…") 不被接受，d 也不收这个参数（核对于 2026-08）。
path()；clip-path 一路还可在前面加 fill-rule，另两路不接受。坐标没有单位，也不会缩放。path() 里的数字按 px 解释，参照盒子的左上角为原点——盒子变大，形状不会跟着变大。这是它最大的短板，解法见 shape() 与 url(#clipPath) 两页。