特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
通过上一节的学习,我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect>
、<circle>
、<ellipse>
、<polygon>
、<line>
、<polygon>
来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外,在SVG中还有一个<path>
元素,可以帮助我们在SVG中绘制任何你想要的形状。也有人说,掌握了SVG中的<path>
是学习SVG的重中之重。今天我们来了解SVG中有关于<path>
的相关知识。
这篇文章将会介绍有关于<path>
的相关知识,但我们不会只用一篇文章的篇幅来介绍,后续将会收集和整理更多有关于<path>
相关的内容。因为在SVG中所有的物件和元素都是由path
组成,所以path
就是具有相当多的指令让使用者来设定,也就是说,搞懂path
就相当于搞定了SVG。
Path相关指令
先来看看<path>
相关的指令(<path>
元素属性),这些指令可以帮助你了解和使用SVG的path
。其中有一点我们需要特别注意:参数大写代表绝对坐标,小写代表与前一个坐标的相对座标。先罗列一下有关于<path>
元素相关的指令:
指令 | 参数 | 描述 |
---|---|---|
M |
x y |
起始点坐标x y (Move to) |
L |
x y |
从当前点的坐标画直线到指定点的 x y 坐标 (Line to) |
H |
x |
从当前点的坐标画水平直线到指定的x 轴坐标 (Horizontal line to) |
V |
y |
从当前点的座标画垂直直线到指定的y 轴坐标 (Vertical line to) |
C |
x1 y1 x2 y2 x y |
从当前点的坐标画条贝塞风线到指定点的x, y 坐标,其中 x1 y1 及x2, y2 为控制点 (Curve) |
S |
x2 y2 x y |
从当前点的坐标画条反射的贝塞曲线到指定点的x, y 坐标,其中x2, y2 为反射的控制点(Smooth curve) |
Q |
x1 y1 x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y 坐标,其中x1 y1 为控制点(Quadratic Bézier curve) |
T |
x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y 坐标,以前一个坐标为反射控制点(Smooth Quadratic Bézier curve) |
A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
从当前点的坐标画个椭圆形到指定点的x, y 坐标,其中rx, ry 为椭圆形的x 轴及y 轴的半径,x-axis-rotation 是弧线与x 轴的旋转角度,large-arc-flag 则设定1 最大角度的弧线或是0 最小角度的弧线,sweep-flag 设定方向为1 顺时针方向或0 逆时针方向(Arc) |
Z |
关闭路径,将当前点坐标与第一个点的坐标连接起来(Closepath) |
制作图软件中的path
同样的,咱们先来看制作矢量图软件制作path
导出来的代码。还是拿Sketch制图软件来举例:
将上图导出为一个.svg
文件,然后在编辑器中打开文件:
<svg width="357px" height="552px" viewBox="0 0 357 552" >
<polyline id="Path" stroke="#979797" fill="none" stroke-width="3" points="2.12890625 2.1640625 265.90625 139.902344 323.003906 37.9804688"></polyline>
<polygon id="Path" fill="none" stroke="#BD10E0" stroke-width="3" points="2.12890625 412.164062 265.90625 549.902344 323.003906 447.980469 250.5625 487.46875"></polygon>
<path fill="none" d="M2.12890625,324.164062 C246.200156,411.01209 334.125937,456.924851 265.90625,461.902344 C198.734375,466.803385 217.766927,432.829427 323.003906,359.980469" id="Path" stroke="#50E3C2" stroke-width="3"></path>
<path fill="none" d="M2.12890625,232.164062 C75.0507812,323.229167 162.976562,369.141927 265.90625,369.902344 C360.395833,338.97526 379.428385,305.001302 323.003906,267.980469" id="Path" stroke="#417505" stroke-width="3"></path>
<path fill="none" d="M2.12890625,142.164062 C106.782552,268.945312 193.595052,309.457031 262.566406,263.699219 C331.53776,217.941406 351.683594,189.36849 323.003906,177.980469" id="Path" stroke="#BD10E0" stroke-width="3"></path>
<path fill="none" d="M2.12890625,82.1640625 L240.945204,206.868276 C254.848001,214.127988 272.003365,209.018721 279.66886,195.335469 L323.003906,117.980469" id="Path" stroke="#D31E1E" stroke-width="3"></path>
如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-path.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!