这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
SVG（三）——path属性
接上文
（5）路径属性<path>
-
作用：创建任意形状
-
属性：
- 只需要用到
<path>的属性 `d``d代表data，可以定义路径的所有点和线，以及点与点之间的关系
- 只需要用到
直线指令
-
M：move to- 使用：
M x y - 描述：表示将当前绘制点移动到
(x,y)
- 使用：
-
L：Line to- 使用：
L x y - 描述：表示从当前点绘制一条到
(x,y)的直线
- 使用：
-
H：Horizontal lineto- 使用：
H x - 描述：表示从当前点绘制一条水平直线到
x坐标，其y坐标保持不变
- 使用：
-
V：Vertical lineto- 使用：
V y - 描述：表示从当前点绘制一条垂直直线到
y坐标，其x坐标保持不变
- 使用：
-
Z：- 使用：
Z - 描述：表从闭合当前绘制的图形，会自动连接最后一个点和第一个点，从而形成封闭图形，若不使用
Z，则无法形成封闭图形
- 使用：
曲线指令
-
A：arc椭圆-
使用：
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表示绘制小弧，大小相对于180deg -
sweep-flag：设置为1表示顺时针绘制，设置为0表示逆时针绘制 -
(x,y)为目标点注：椭圆的中心坐标
(cx,cy)会自动计算以满足其它参数
-
-
-
Q：quadratic bezier curve- 使用：
Q x1 y1 x y - 描述：表示从当前点绘制一条二次贝塞尔曲线到点
(x,y)(x1,y1)为控制点
- 使用：
-
T：elliptical arc- 使用：
T x y - 描述：绘制一条特殊的二次贝塞尔曲线，省略控制点
- 这个指令必须要跟在
Q指令之后，它可以自动根据前一个Q的控制点去推断下一个控制点
- 这个指令必须要跟在
- 使用：
-
C：curveto- 使用：
C x1 y1 x2 y2 x y - 描述：表示从当前点绘制一条三次贝塞尔曲线到点
(x,y)(x1,y1)为第一个控制点，(x2,y2)为第二个控制点
- 使用：
-
S：smooth quadratic bezier curveto- 使用：
S x2 y2 x y - 描述：绘制一条特殊的三次贝塞尔曲线，省略第一个控制点
- 使用：
指令大小写
- 大写代表绝对位置，绝对位置即相对于 SVG 画布左上角原点位置
- 小写代表相对位置，相对位置即相对于当前画笔所在位置
表格
| 指令 | 释义 | 模板 | 描述 |
|---|---|---|---|
M | moveto | M x y | 表示移动到(x,y)坐标点 |
L | lineto | L x y | 表示从当前点绘制一条到(x,y)的直线 |
H | orizontail lineto | H x | 表示从当前点绘制一条水平直线到x坐标，y坐标不变 |
V | vertical lineto | V y | 表示从当前点绘制一条垂直直线到y坐标，x坐标不变 |
Z | closepath | Z | 表示闭合图形，会自动连接最后一个点到第一个点，以形成封闭图形 |
A | arc | A rx ry, x-axis-rotation, large-arc-flag, sweep-flag, x y | 表示从当前点绘制一条以椭圆为基准的弧线到(x,y) |
Q | quadratic bezier curve | Q x1 y1 x y | 表示从当前点绘制一条二次贝塞尔曲线到点(x,y)，以(x1,y1)为控制点 |
T | elliptical arc | T x y | 表示绘制一条特殊的二次贝塞尔曲线，省略控制点，这个属性必须要跟在Q属性之后 |
C | curveto | C x1 y1 x2 y2 x y | 表示从当前点绘制一条三次贝塞尔曲线到点(x,y)，(x1,y1)为第一个控制点，(x2,y2)为第二个控制点 |
S | smooth quadratic bezier curveto | S x2 y2 x y | 表示绘制一条特殊的三次贝塞尔曲线，会省略第一个控制点，其第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点 |
