9.10 SVG 路径（path）

SVG中的路径概念可以是一个形状的外框，也可以是用来裁剪的线条，这个线条可以被描边，封闭时还可以被填充。

路径和折线或多边形不同之处在于，路径可以是直线也可以曲线，因此使用路径可以构造更为复杂的几何图形。

我们可以把路径看成是手工绘图的笔迹，可以用点的集合和绘制方式（如线段或圆弧）来描述。

path 标签

path 标签用来创建一条路径，路径元素的基本属性是路径数据，用 d='path data' 语法来定义。路径数据中包含了点集和绘制指令。

点集就是一组“x y”格式的坐标，以空格隔开，以指令字母开头。指令可以有如下几种：

• M = moveto 移动到某坐标位置
• L = lineto 直线连线
• H = horizontal lineto 水平连线
• V = vertical lineto 垂直连线
• C = curveto 曲线连接
• S = smooth curveto 平滑曲线连接
• Q = quadratic Bézier curve 二次贝塞尔曲线连接
• T = smooth quadratic Bézier curveto 平滑二次贝塞尔曲线连接
• A = elliptical Arc 椭圆弧连接
• Z = closepath 关闭路径

例子1 - 三角形

代码如下：

代码解释如下：

• 首先移动到坐标(150,0)，接着连线到坐标(75,200)，再接着连线到坐标(225,220)，最后结束路径回到起点(150,0)。

例子2 - 贝塞尔曲线

贝塞尔曲线是计算机矢量图形学中曲线绘制的基础，一般的矢量图形软件通过它来精确画出曲线。

贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在Photoshop里看到的钢笔工具就是来做这种矢量曲线的。

多个贝塞尔曲线连接起来就可以拟合出真实感的手绘曲线。而这通过鼠标绘制是难以完成的。

三次贝塞尔曲线（Cubic）使用4个点，2个端点和2个控制点来控制曲线绘制

二次贝塞尔曲线使用3个点来控制曲线的绘制，即2个端点和中间的控制点，通过移动控制点来改变曲线。如下所示：

代码如下：

代码解释如下：

• 中间的蓝色曲线是二次贝塞尔曲线，使用小写q指令绘制，其他线条和圆点是用来辅助说明贝塞尔曲线的数学原理的。
• A是起点、C是终点，B是中间控制点。
• 注意小写l指令使用相对位移来进行连线，比如“l 150 -300”，代表从当前点x方向向右（正方向）移动150，y方向向上（负方向）移动300。小写q指令语法类似。

可以看到，使用文本编辑器以及自己计算点的位置对于复杂图形的制作是非常低效的方式，这就是为什么要使用Inscape这类图形工具的原因。