svg path路径的介绍已经使用,看完就能灵活使用svg path路径
2017-03-13 23:11

svg path的指令

path的指令有:

M = moveto(X,Y) :将画笔移动到指定的坐标位置
L = lineto(X,Y) :画直线到指定的坐标位置
H = horizontal lineto(X):画水平线到指定的X坐标位置
V = vertical lineto(Y):画垂直线到指定的Y坐标位置
C = curveto(X1,Y1,X2,Y2,ENDX,ENDY):三次次贝赛曲线
S = smooth curveto(X2,Y2,ENDX,ENDY):光滑三次次贝塞尔曲线
Q = quadratic Belzier curve(X,Y,ENDX,ENDY):二次贝赛尔曲线
T = smooth quadratic Belzier curveto(ENDX,ENDY):光滑二次贝塞尔曲线
A = elliptical Arc(RX,RY,rotatedeg,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径

M,L,H,V指令

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 L 0,0 ">

    </path>
</svg>

效果如下:

svgl.png

lineto用大写L和小写l的意义是不同的。

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 l 200,-40 ">

    </path>
</svg>

效果如下:

svgl2.png

小写l表示的是长度,而不是坐标,l x,y中的x表示横向长度,y表示纵向长度,正值往下,负值往上,然后勾股定理得到的斜边才是画的那条线。

path的H,V的大小写和L是相同的意义。

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 H400 ">

    </path>
</svg>

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 ">

    </path>
</svg>

两个写法的效果是一样的,如下:

svgh.png

H是横线,V是竖线,竖线就不多赘述了。

贝塞尔曲线用的比较少,介绍起来也比较麻烦,本篇文章不介绍贝塞尔曲线,我们下面看看弧线:A的使用。

A rx,ry rotatedeg flag1 flag2 x,y

rx,ry是弧线所处椭圆的两个半径,如果rx==ry,那么弧线就是圆形的弧线。

rotatedeg表示椭圆的水平线与x轴逆时针的顺时针方向的夹角。

flag1有两个枚举值,1表示大角度弧线,0表示小角度弧线。

flag2有两个枚举值,1表示弧线按照顺时针方向画,0表示弧线按照逆时针方向画。

x,y为终点的坐标。

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 A 200,100 0 0 0 250,150 ">

    </path>
</svg>

效果如下:

arc.png

上面的flag2是0,表示是逆时针画弧线,我们把flag2改为1

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 A 200,100 0 0 1 250,150 ">

    </path>
</svg>

效果如下:

arc2.png

向下弯的弧线,变成了向上弯的弧线。

flag1的0表示小弧线,我们把flag1改为1,用大弧线画

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 A 200,100 0 1 0 250,150 ">

    </path>
</svg>

效果如下:

arc3.png

大弧的效果显示的就是小弧线除外剩下的椭圆中的弧线,并且开始位置是小弧线的结束位置。

下面看看rotatedeg的旋转弧度的效果

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 A 200,100 90 0 0 250,150 ">

    </path>
</svg>

效果如下:

arc4.png

这样可以看到,rotatedeg的效果把椭圆旋转了90度,所以显示出来椭圆两端的尖弧。

弧线的命令:A的大小写跟H,L,V一样,如果用小写a,那么表示的是坐标移动的差值。

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d="M 200,200 h200 a 200,100 90 0 0 -150,-50 ">

    </path>
</svg>

效果如下:

1486571222268009175.png

使用小a命令的效果跟上面的一样。

与这些命令相同,M移动命令的大小写也有同样的区别:

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d=" M 200,200 m -50,-50 h200 a 200,100 90 0 0 -150,-50 ">

    </path>
</svg>

效果如下:

arc5.png

最后就是z命令,用来闭合路径:

<svg  viewBox="0 0 400 400">
    <path fill="none" stroke="#FF0000" STROKE-WIDTH="4" d=" M 200,200 m -50,-50 h200 a 200,100 90 0 0 -150,-50 z">

    </path>
</svg>

效果如下:

arc6.png

z命令的作用就是把结尾和开始位置连接到一起,形成一个闭合图形。

对于path中的贝塞尔曲线指令,后文有介绍,并且有贝塞尔的展示工具。

svg path结语

本文讲解了svg path路径的常见命令的使用,通过讲解自己对svg path的理解更清楚了。svg path 使用中一定要注意命令字符的大小写,大写代表坐标绝对位置,小写代表坐标相对位置,意义相去很大的。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(8221)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1