1. Path命令
| 命令 | 含义 |
|---|---|
| M/m(x,y)+ | 移动当前位置 |
| L/l (x,y)+ | 绘制直线到指定位置 |
| H/h (x)+ | 绘制水平线到指定的x位置 |
| V/v (y)+ | 绘制垂直线到指定的y位置 |
| Z/z | 闭合当前路径 |
| C/c (x1,y1,x2,y2,x,y)+ | 从当前位置绘制三次贝塞尔曲线到x,y位置 |
| S/s (x2,y2,x,y)+ | 光滑绘制三次贝塞尔曲线到指定位置 |
| Q/q (x1,y1,x,y)+ | 绘制二次贝塞尔曲线到指定位置 |
| T/t (x,y)+ | 光滑绘制二次贝塞尔曲线到指定位置 |
| A/a (rx,ry,xr,laf,sf,x,y) | 绘制弧线到指定位置 |
2. Path命令基本规律
- 区分大小写：大写表示绝对位置，小写为相对位置
- 最后的参数表示最终要到达的位置
- 上一个命令结束的位置就是下一个命令开始的位置
- 命令可以重复参数表示重复执行同一条命令
3. 弧线命令A(a)
- A(rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,X,Y)
- rx：椭圆横轴半径
- ry：椭圆竖轴半径
- x-axis-rotation：椭圆横轴相对于X轴的偏移角度(正负夹角)
- large-arc-flage：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有4条，此值：取 0 表示绘制小弧度，取 1 表示绘制大弧度
- sweep-flag：在前面四个参数确定后，还有两条圆弧，此值：取 0 表示绘制逆时针方向的圆弧，取 1 表示绘制顺时针方向的圆弧
- X,Y：圆弧的终点位置
4. 二次贝塞尔曲线
5. 三次贝塞尔曲线
6. Path语法
<path d="M250 150 L150 350 L350 350 Z" />
<path d="M0,-100A100,100,0,0,1,100,0L0,0Z" />
