深入讲解SVG路径的各种命令，包括移动、线段、曲线、弧线等命令的详细用法。通过实例掌握路径绑制的核心技术。 路径是 SVG 最核心也最复杂的内容。掌握路径命令，就能绑制任意形状的图形。
路径是一系列命令的集合，告诉浏览器如何绑制图形：
M 10,10 L 100,10 L 100,100 Z
这条路径的意思是：
| 命令 | 说明 |
|---|---|
| M/m | 移动画笔 |
| L/l | 画直线 |
| H/h | 画水平线 |
| V/v | 画垂直线 |
| Z/z | 闭合路径 |
| 命令 | 说明 |
|---|---|
| C/c | 三次贝塞尔曲线 |
| S/s | 平滑三次贝塞尔曲线 |
| Q/q | 二次贝塞尔曲线 |
| T/t | 平滑二次贝塞尔曲线 |
| A/a | 椭圆弧线 |
相对于 SVG 坐标原点：
<path d="M 20,20 L 150,20 L 150,80 L 20,80 Z" fill="#3498db"/>
相对于当前画笔位置：
<path d="M 20,20 l 130,0 l 0,60 l -130,0 z" fill="#e74c3c"/>
接下来我们会详细学习每个命令：
多个命令可以组合使用：
<path d="M 20,80 C 40,20 80,20 100,80 S 160,140 180,80 L 280,80"
fill="none" stroke="#3498db" stroke-width="2"/>
<path d="M 10,10 L 100,10 L 100,100"/>
<path d="M 10,10 H 100 V 100"/>
<path d="M 10,10 L 60,10 L 60,60"/>
<path d="M 10,10 l 50,0 l 0,50"/>
<path d="M 10,10 L 20,20 L 30,30"/>
<path d="M 10,10 L 20,20 30,30"/>
路径是 SVG 的核心，通过不同的命令组合可以绑制任意形状。理解绝对坐标和相对坐标的区别，掌握各种命令的用法，是学好 SVG 的关键。