第3章：路径绘制入门：path元素基础与命令详解
好，咱们今天来啃SVG里最硬核的一块——path元素。说实话，我刚接触SVG那会儿，看到path那一长串字母数字混在一起，头都大了。但后来我发现，这东西就像学开车，记住几个基本操作，你就能画出任何形状。
3.1 path元素是什么？
path是SVG里最强大的绘图元素。你可以把它想象成一支智能画笔，你告诉它「往左走、画弧线、拐弯」，它就照做。其他形状如rect、circle能画的，path都能画；它们画不了的，path也能画。
它的核心属性就一个——d属性。这个属性里装的就是绘图指令。比如：
<path d="M 10 10 L 100 100" stroke="black" fill="none"/>这条指令的意思是：从(10,10)这个点开始，画一条直线到(100,100)。就这么简单。
核心概念：path的d属性由「命令字母+坐标参数」组成。命令字母分大小写——大写表示绝对坐标，小写表示相对坐标。我个人习惯先用大写把位置定死，调试好了再考虑要不要改成相对坐标。
3.2 基础命令：M、L、H、V
这四个命令是最常用的，就像你学写字要先练横竖撇捺。
M（moveto）—— 提笔移动
M命令相当于把笔抬起来，放到一个新位置。它不画线，只定位。每个path几乎都以M开头：
<path d="M 50 50 L 150 50 L 150 150 Z"/>这里M 50 50就是把笔放到(50,50)这个点。后面再跟L命令，就从这里开始画。
小技巧：如果你在一个path里画多个不相连的图形，可以用多个M命令。比如M 10 10 L 50 10 M 100 100 L 150 100，这样两条线互不干扰。
L（lineto）—— 画直线
L命令从当前点画一条直线到指定点。我早期做数据可视化时，画折线图全靠L命令堆出来的：
<path d="M 0 100 L 50 80 L 100 120 L 150 60 L 200 90" stroke="blue" fill="none"/>你看，这就是一条折线。每个L后面跟一个点，笔就画过去。
H（horizontal lineto）—— 水平线
H只画水平线。你只需要给一个x坐标，y坐标自动沿用当前点的y值。比如：
<path d="M 20 50 H 200" stroke="red"/>这条线从(20,50)水平画到(200,50)。省了一个坐标，写起来快多了。
V（vertical lineto）—— 垂直线
和H相反，V只画垂直线，只需要给y坐标：
<path d="M 100 20 V 180" stroke="green"/>从(100,20)垂直画到(100,180)。
注意：H和V的小写版本h和v，表示相对距离。比如h 50表示向右移动50像素，v -30表示向上移动30像素。我曾经在项目里把大写H写成了小写h，结果整个图形偏移了，排查了半天才发现是大小写的问题。
3.3 闭合命令：Z
Z命令把路径的终点和起点连起来，形成一个封闭图形。它不需要参数：
<path d="M 50 50 L 150 50 L 100 150 Z" fill="yellow" stroke="black"/>这个三角形，最后那个Z把(100,150)和起点(50,50)连上了。如果不加Z，它就是个折线，填充效果会不一样。
3.4 曲线命令：C、S、Q、T
直线好理解，曲线才是path的杀手锏。我刚开始学的时候，被这些命令搞得晕头转向。后来我总结了一个规律——记住「控制点」这个概念就行了。
C（三次贝塞尔曲线）
C命令需要三个点：两个控制点，一个终点。格式是C x1 y1, x2 y2, x y：
<path d="M 50 100 C 100 20, 200 20, 250 100" stroke="blue" fill="none"/>这条曲线从(50,100)开始，经过控制点(100,20)和(200,20)的「拉扯」，最终到达(250,100)。控制点就像磁铁，把曲线往自己那边吸。
实战经验：我在做数据仪表盘时，经常用C命令画平滑的趋势线。记住一个口诀——控制点离起点越远，曲线越「冲」；离终点越近，曲线越「收」。
S（平滑三次贝塞尔曲线）
S是C的简化版。它自动把上一个控制点做镜像，你只需要提供一个控制点和一个终点：
<path d="M 50 100 C 100 20, 200 20, 250 100 S 350 180, 400 100" stroke="red" fill="none"/>这里S后面的(350,180)是第二个控制点，它的镜像就是上一个控制点(200,20)关于终点的对称点。说白了，S能保证曲线在连接处是平滑的，没有折角。
Q（二次贝塞尔曲线）
Q比C少一个控制点，格式是Q x1 y1, x y：
<path d="M 50 100 Q 150 20, 250 100" stroke="green" fill="none"/>二次曲线只有一个控制点，曲线更简单、更可控。我画一些简单的弧线或气泡时，Q命令用得最多。
T（平滑二次贝塞尔曲线）
T是Q的平滑版，和S类似，自动镜像上一个控制点：
<path d="M 50 100 Q 150 20, 250 100 T 450 100" stroke="purple" fill="none"/>T后面只需要一个终点，控制点自动算好。连续用T可以画出一条非常平滑的波浪线。
3.5 命令速查表
| 命令 | 名称 | 参数 | 说明 |
|---|---|---|---|
| M/m | moveto | x y | 移动到指定点 |
| L/l | lineto | x y | 画直线到指定点 |
| H/h | horizontal lineto | x | 画水平线 |
| V/v | vertical lineto | 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 | 镜像上一个控制点 |
| Z/z | 闭合路径 | 无 | 连接终点和起点 |
3.6 避坑指南
我踩过的坑，你最好别踩：
- 大小写搞混：大写是绝对坐标，小写是相对坐标。我曾经在同一个path里混用大小写，结果图形完全变形。建议新手先全部用大写，等熟悉了再玩相对坐标。
- 忘记加空格或逗号：坐标之间可以用空格或逗号分隔，但不能省略。比如
M10 10L20 20这样写虽然浏览器能解析，但可读性极差。我习惯用空格，看着清爽。 - Z命令的位置：Z必须放在最后，而且它只连接当前点和起点。如果你中间有多个M，Z只连接最后一个M的起点。
- 曲线控制点超出画布：控制点可以超出SVG画布范围，曲线依然有效。但调试时很难看到控制点位置，建议先用
circle把控制点标出来，方便观察。
我的调试方法：写复杂path时，我会先画一个简单的版本，比如只画一条线，确认坐标对了再逐步加细节。千万别想着一次写完所有命令，那跟闭着眼睛开车没区别。
3.7 动手试试
光看不练假把式。我建议你打开一个在线SVG编辑器，试试下面这个例子：
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 一个简单的心形 -->
<path d="M 200 180
C 100 100, 50 50, 100 20
C 150 -10, 200 30, 200 60
C 200 30, 250 -10, 300 20
C 350 50, 300 100, 200 180 Z"
fill="pink" stroke="red" stroke-width="2"/>
</svg>这个心形用了四个C命令和Z闭合。你试着改改控制点的坐标，看看心形怎么变胖变瘦。嗯，这就是path的魅力——一点点参数变化，形状就完全不同。
下一章我们会讲圆弧命令A，那玩意儿更刺激。先把今天这些基础命令练熟，后面就轻松了。