SVG-Path

2017-08-30  本文已影响0人  e1927cff1ec5

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 标识开头的一点连接起来。所以,它不存在什么表示点之类的,格式为:

而上面也可以进行相关的优化,最终的结果为:

上一篇下一篇

猜你喜欢

热点阅读