SVG-path命令中大写和小写区别

1、path中命令

d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：

M（移动到）、

L（直线到）、

H（水平线到）、

V（垂直线到）、

C（三次贝塞尔曲线）、

S（光滑曲线）、

Q（二次贝塞尔曲线）、

T（光滑二次贝塞尔曲线）、

A（圆弧）、

Z（闭合路径）。

以上为大写字母，实际上还有对应的小写字母

M/m、L/l、H/h、V/v、Z/z、C/c、S/s、Q/q、T/t和A/a
命令汇总

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) 从当前位置绘制弧线到指定位置

命令基本规律

1. 参数之间可以用空格或逗号隔开，如果下一个数值是负数，才可以省略。

<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
2. 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置 。

3. 最后的参数表示最终要到达的位置 。

4. 上一个命令结束的位置就是下一个命令开始的位置 。

5. 命令可以重复参数表示重复执行同一条命令。

2、大小写字母含义
大写表示坐标参数为绝对位置，小写则为相对位置。
简单理解：
绝对位置，就是坐标系点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" />