SVG Path（一）基础概念

2021-10-29 411 阅读1分钟

Path 由命令及其参数组组成的字符串
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)+	从当前位置绘制 `三次贝塞尔曲线` 到 `指定位置`
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)	从当前位置绘制 `弧线` 到 `指定位置`

命令使用规则：
- 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置。
  
  绝对位置 与 相对位置 是什么概念？
  
  比如：横向移动从 x 10 移动到 x 200
  
  相对位置：结束点的 x 位置值为 210
  
  绝对位置：结束点的 x 位置值为 200
```
 
 <path d="M 10 10 h 200" stroke="blue" />
 
 <path d="M 20 20 h 200" stroke="blue" />
 
 <path d="M 10 30 H 200" stroke="red" />
 
 <path d="M 20 40 H 200" stroke="red" />
```
- 最后的参数表示最终要到达的位置。
- 上一个命令结束的位置就是下一个命令开始的位置。
- 命令可以重复参数，表示重复执行同一条命令。