SVG-Path

作者: e1927cff1ec5 | 来源:发表于2017-08-30 19:55 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:SVG-Path

          本文链接:https://www.haomeiwen.com/subject/laehcttx.html