SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了。
先看一下path标签的基本用法:
path标签通过属性d来定义路径,定义信息由一段字符串构成,另外path也可以通过fill和stroke属性来定义填充和边框。
d属性的信息其实并不复杂,由字母和数字构成,数字表示坐标点,字母负责表示如何连接这些坐标点。比如上面的示例中,M表示起点,L表示直线连接,所以d的信息可以这样解读:
M100,100
L200,200
L200,400
在path标签的d属性中,一共有10个命令可以使用,下面5个命令是基础,比较简单。
M
Z
L
H
V
M和L
再看一个M和L的例子
从A点(30,30)开始,直线画向B点(170,30),再直线到C点(30,170),再直线到D点(170,170),最终形成了Z型的路径。
填充效果,以及Z
这段路径描述中有两个M,所以就在一个path中,出现了两个相对独立的路径,第一个路径和上面的例子一样,是Z字型。
第二个路径则是一个矩形,描述中出现了Z命令,表示将这段路径的开头和结尾连接起来。
另外,这里我们给路径定义了fill属性,可以看到,无论路径是否闭合,fill都会生效。
H和V
最后看一下H和V两个命令,实际上就是在x或y轴不变时,L命令的简写,所以下面两端描述,画出的图是一样的。