知识点
path标签
path标签中的d属性用来控制path坐标，d属性中有不少特殊的“大写字母”，这些“大写字母”用来控制。其实这些字符还有“小写字母”。至于两者的区别是： “大写字母”是绝对坐标，“小写字母”是相对坐标。
移动类：
M = moveto：将画笔移动到指定坐标。直线类：
L = lineto：画直线到指定坐标。
H = horizontal lineto：画水平直线到指定坐标。
V = vertical lineto：画垂直直线到指定坐标。曲线类：
C = curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标。
S = shorthand/smooth curveto：与前一条贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线。
Q = quadratic Bezier curveto：画二次贝塞尔曲线经一个指定控制点到达终点坐标。
T = Shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线。弧线类：
A = elliptical arc：画椭圆曲线到指定坐标。X半径：为什么区分X半径和Y半径，因为圆弧所在的圆，有正圆和椭圆； Y半径：正圆的X半径和Y半径是一致的，椭圆自然不一致； 角度：椭圆时才会用到，因为旋转椭圆的角度后，得到的弧线是不一样的，而如果是正圆，这个角度参数写多少都是不会变的，因为正圆旋转360还是一样的一段弧度； 弧长：0小弧，1大弧 方向：0逆时针，1顺时针 终点X坐标 终点Y坐标闭合类：
Z = closepath：绘制一条直线链接终点和起点，用来封闭图形。
实例
<html>
<head>svg实例</head>
<body>
<div>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 350">
<!--
M打头--表示新的一条线；
L链接--表示后续点，多点连接；
Z结束--表示第一个点和最后一个点闭合；
-->
<path d="M10 10L30 160L50 10Z" stroke="red" stroke-width="1" fill="yellow"></path>
<!--直线-->
<line x1="100" y1="0" x2="100" y2="200" stroke="blue" stroke-with="2"></line>
<!-- 以上两条线可以用一个path搞定，看下方-->
<path d="M110 10L130 160L150 10Z M180 10L180 160L200 10" stroke="red" stroke-width="1" fill="none"></path>
<!-- 用path的H和V能快速画出阶梯状图形-->
<path d="M250,10H310V100H350V200" stroke="yellow" fill="transparent"></path>
<!-- A标签画弧线， A后面第一个参数表示X轴半径；
A后面第二个参数表示Y轴半径；
A后面第三个参数表示角度；椭圆时才会用到
A后面第四个参数表示弧长，0表示小弧，1表示大弧；
A后面第五个参数表示方向，0表示逆时针，1表示顺时针；
A后面第六个参数表示终点X坐标；
A后面第七个参数表示终点Y坐标；
-->
<path d="M400,10A200 200 0 0 0 500 200" stroke="blue" fill="transparent"></path>
</svg>
</div>
</body>
</html>
效果图：
————————————————
