1、svg是html5的新特性，全称：
Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5之后，纳入了HTML5标准标签库，并进行了一定的瘦身。
2、使用svg要注意的点：
- svg图形的样式可以用HTML赋值，也可以使用css形式，但不接收css的一般属性，只能使用svg元素的专有样式属性。比如：背景填充：fill、描边宽度：stroke-width、描边颜色：stroke、文本大小：font-size等...
- svg图形的属性不属于HTMLDOM标准，只能使用核心DOM操作其属性
- 使用JS动态创建SVG元素时：
方法一：svg.innerHTML='';方法二：document.createElementNS("http://www.w3.org/2000/svg"," ");
4.SVG元素的nodeName都是纯小写形式，与普通的HTML元素不同
3、进入正题：svg是使用标签画图，circle画圆，rect画矩形....，但是这些标签，只可以画规则的图形。那么path就是画不规则图形的救星。
我们先在下面列出了SVG <path>元素的虚拟画笔可以使用的命令。大写的指令通常将参数坐标解析为绝对坐标。小写的指令通常将参数坐标解析为相对坐标。
| 指令 | 参数 | 名称 | 描述 |
|---|---|---|---|
| M | x,y | moveto 移动到 |
移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制 |
| m | x,y | moveto | 同M，但使用相对坐标 |
| L | x,y | lineto 连直线到 |
从当前画笔所在位置绘制一条直线到指定的（x,y）坐标 |
| l | x,y | lineto | 同L，但使用相对坐标 |
| H | x | horizontal lineto 水平连线到 |
绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标 |
| h | x | horizontal lineto | 同H，但使用相对坐标 |
| V | y | vertical lineto 垂直连线到 |
从当前位置绘制一条垂直直线到参数指定的y坐标 |
| v | y | vertical lineto | 同V，但使用相对坐标 |
| C | x1,y1 x2,y2 x,y | curveto 三次方贝塞尔曲线 |
从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度 |
| c | x1,y1 x2,y2 x,y | curveto | 同C，但使用相对坐标 |
| S | x2,y2 x,y | shorthand / 平滑三次方贝塞尔曲线 | 从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同 |
| s | x2,y2 x,y | shorthand / 平滑三次方贝塞尔曲线 | 同S，但使用相对坐标 |
| Q | x1,y1 x,y | 二次方贝塞尔曲线 | 从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度 |
| q | x1,y1 x,y | 二次方贝塞尔曲线 | 同Q，但使用相对坐标 |
| T | x,y | 平滑的二次贝塞尔曲线 | 从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点 |
| t | x,y | 平滑的二次贝塞尔曲线 | 同T，但使用相对坐标 |
| A | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 椭圆弧线 | 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向 |
| a | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 椭圆弧线 | 同A，但使用相对坐标 |
| Z | 无 | 闭合路径 | 从结束点绘制一条直线到开始点，闭合路径 |
| z | 无 | 闭合路径 | 同Z |
注意:所有的这些字符命令都可以用大小写两种形式。大写表示绝对位置，而小写表示相对位置。
（绝对位置：相对于画布的原点。一直在画布的左上方。相对坐标：是表示相对于它前面的点需要移动多少距离）
举一个例子：画出一个颜色相间的镭射图
<svg id="s" width="100" height="100"> <path d=" M50 50 L 25 6.6987 A 50 50, 0,0,1,75 6.6987 L 50 50" fill="#F6E237"/> <path d=" M50 50 L 0 50 A 50 50, 0,0,1,25 6.6987 L 50 50" fill="#000"/> <path d=" M50 50 L 75 6.6987 A 50 50, 0,0,1,100 50 L 50 50" fill="#000"/> <path d=" M50 50 L 100 50 A 50 50, 0,0,1,75 93.30127 L 50 50" fill="#F6E237"/> <path d=" M50 50 L 75 93.30127 A 50 50, 0,0,1,25 93.30127 L 50 50" fill="#000"/> <path d=" M50 50 L 25 93.30127 A 50 50, 0,0,1,0 50 L 50 50" fill="#F6E237"/> </svg>
结果如下图所示：
解释一行代码：
<path d=" M50 50 L 25 6.6987 A 50 50, 0,0,1,75 6.6987 L 50 50" fill="#F6E237"/>d:是定义一条路径的属性。首先moveTo到画布的中点（50,50）从这一点出发，画一条直线到点（25,6.6987），又从这一点出发画一条圆弧这里是一个正圆，因为rx=ry，一直到（75,6.6987）这个点，在从这点出发画一条直线到中心，并填充这部分区域为颜色 #F6E237；
参考文章：https://blog.csdn.net/u012917700/article/details/51838552