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