SVG之旅：路径

作者：大漠 日期：2017-12-25 点击：2594
SVG
SVG之旅

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

制作图软件中的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

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

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