svg是一种基于XML的语言，可内嵌到html中
svg与canvas的区别
- svg出现时间比canvas长
- canvas可以绘制2D和3D；svg可以绘制各种图形，滤镜，动画等
- canvas像素图形只能脚本驱动；svg是矢量图形，支持脚本和css
- canvas适合小面积，大数量的应用场景；svg适合大面积，小数量的场景
- canvas动画效果是靠数据驱动；svg靠DOM驱动
svg属性
xmlns：命名空间声明，命名空间声明是通过xmlnx attribute 提供的。在xml中，标签都是自定义的，很有可能同一个标签名有不同的意义，所以需要声明一个命名空间来进行区分，官方推荐用自己的网址来命名这个namespace
<svg xmlns="http://www.w3.org/2000/svg"></svg>
意味着这个svg标签和的子节点都属于"http://www.w3.org/2000/svg" 这个svg命名空间。
该空间只需在根节点上声明一次就可以
width：宽
height：高
viewBox：缩放比例，四个参数(x,y,宽,高)
<svg
xmlns="htp://www.w3.org/2000/svg"
width='100px' height='100px
viewBox='0 0 200 200'
></svg>
viewBox的意思是：从x轴的0点和y轴的0点开始，定义了一个200*200大小的区域
width和height定义了一个100*100的画布大小
结合来看就是要将这个200*200的区域放在100*100的画布中展示，也就是画布内的图形缩小2倍，也体现了svg的伸缩性
svg图形
矩形：<rect/>
width和height可定义宽高；
style可定义css属性
fill可写在style中也可单独写，定义填充颜色
fill-opacity:透明度
圆形：<circle/>
cx,cy：圆点x，y坐标，默认（0,0）
r：半径
椭圆：<ellipse/>
cx,cy：椭圆中心坐标
rx：水平半径
ry：垂直半径+
线：<line/>
x1,y1：线条开始坐标
x2,y2：线条结束坐标
折线：<polyline/>
points：定义转折点x,y坐标
多边形：<polygon/>
points：定义每个角的x和y坐标<polygon points="200,10 250,190 160,210"/>（三角形）
fill-rule（图形填充规则）:指定哪一种算法去判断画布上的某区域是否属于该图形“内部”（内部区域将被填充）[详情](https://www.runoob.com/svg/svg-polygon.html)
路径：<path></path>参考
path可以创建很多图形，如上面的矩形，圆形，椭圆，折线，多边形还可以创建贝塞尔曲线，2次曲线等曲线
通过属性d来完成 d的值是一个“命令+参数”的序列
-
M(m)[x y]=moveto ：将画笔移动到[x,y]） -
L(l)[x y]=lineto ：画一条直线到[x,y] -
H(h)[x]=horizontal lineto ：水平画一条线到x -
V(v)[y]=vertical lineto ：竖直画一条线到y -
A(a)[rx ry x-axis-rotation large-arc sweep x y] ：rx,ry：椭圆弧的水平和垂直半径；x-axis-rotation：椭圆相对于x轴旋转角度；large-arc=0弧线小于180°,=1弧线大于180°；sweep：=0弧线逆时针旋转，=1弧线顺时针旋转; x,y截止到该点 -
Q(q)[cx cy x y]：从当前点画一条到[x,y]点的二次贝塞尔曲线，曲线的控制点为[cx,cy] 图中黑点的位置就是cx，cy的位置，当点的位置发生变化时曲线弧度也会随之变化
-
T(t)[x y] ：此命令跟在Q(q)后面，Q(q)生成曲线s后，T(t)的作用是从s的终点在画一条到[x,y]的二次贝塞尔曲线，曲线控制点为s的控制点到s终点的对称点 -
C(c)[cx1 cy1 cx2 cy2 x y]：从当前点画一条到[x,y]的三次贝塞尔曲线，曲线的开始控制点[cx1,cy1]，结束控制点[cx2,cy2] -
S(s)[cx2 cy2 x y]：此命令只能跟在C(c)后面使用，假设C(c)命令生成曲线s，则该命令的作用是画一条到[x,y]的三次贝塞尔曲线，曲线的终点控制点是[cx2,cy2]，开始控制点s的终点控制点到s的终点的对称点 -
Z(z) 路径闭合，从当前点画一条直线到路径的七点
上述命令大写表示绝对定位，小写表示相对定位（相对于上个坐标的位置）
