SVG的path

 

 

直线	矩形（矩形）	圆形	椭圆形	折线	多边形	文本	路径
line	rect	circle	ellipse	polyline	polygon	text	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)	从当前位置绘制弧线到指定位置

其中大写字母为相对于起点的绝对位置，小写字母为相对于上一个点的相对位置

菜鸟svg编辑器    https://c.runoob.com/more/svgeditor/

 MDN的详细教程   https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths