SVG绘图方法（path）

1、svg是html5的新特性，全称：Scalable Vector Graphiph，可缩放的矢量图，此技术在2000年就已经存在了，独立于网页的一门技术；HTML5之后，纳入了HTML5标准标签库，并进行了一定的瘦身。

2、使用svg要注意的点：

1. svg图形的样式可以用HTML赋值，也可以使用css形式，但不接收css的一般属性，只能使用svg元素的专有样式属性。比如：背景填充：fill、描边宽度：stroke-width、描边颜色：stroke、文本大小：font-size等...
2. svg图形的属性不属于HTMLDOM标准，只能使用核心DOM操作其属性
3. 使用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.youkuaiyun.com/u012917700/article/details/51838552