SVG矢量绘图 path路径详解（基本画法）

SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。
先看一下path标签的基本用法:

<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />

 

path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。

d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所以d的信息可以这样解读：

 

M100,100    ->    以（100，100）坐标点为起点
L200,200    ->    从（100，100）向（200，200）画一条直线
L200,400    ->    从（200，200）向（200，400）画一条直线

 

在path标签的d属性中，一共有10个命令可以使用，下面5个命令是基础，比较简单。

M     移动到（moveTo）    x,y    开始点坐标
Z    闭合路径（closepath）    将路径的开始和结束点用直线连接
L    直线（lineTo）    x,y