SVG之旅:路径

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过上一节的学习,我们知道了怎么在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 y1x2, 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制图软件来举例:

制作图软件中的path

将上图导出为一个.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>
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-path.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部