Path 在 SVG 中的地位应该是比较高的,实际上,利用 Path 这个一个标签可以画出任意的图形。path 中d(data) 属性是用来定义相关线条数据,通常是以M/m为起始,代表的就是move to的意思。在 path 中,一共可以定义 10 种不同的图形。例如M/m,L/l。 大家可以注意,每种标识符有两种书写方式,即,大小写。
大写: 参照的是绝对坐标,即,SVG 的右上角
小写: 参照的相对坐标,即,前一个点的坐标。
而在 10 中不同表示符中,又可以分为直线和曲线两种不同的标识符。这里,我们分类来讲解一下。
线型
M/m
该使用定义起始点的,没啥特殊的作用。
表示,以 (10,10) 为起始点。
L/l
原意是 Line to,用来画线段的。格式和 M/m 差不多:
H/h
用来画水平线,即,Horizontal。既然方向已经定了,剩下的就是距离,格式很简单:
V/v
用来画竖直线,即,vertical。同上,方向也定了,格式为:
看个例子吧:
该 path 实际上就是画了一个正方形,宽 = 高 = 90。
Z/z
该标识符用来表示 path 的结束,并且将最后一点和 M/m 标识开头的一点连接起来。所以,它不存在什么表示点之类的,格式为:
而上面也可以进行相关的优化,最终的结果为: