1.SVG 图表，动效
Scalable Vector Graphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。
SVG面向图形，HTML面向文本。
2.SVG和Canvas的区别
Canvas做图是在画布上通过js来控制动态
SVG是通过标签来实现的
SVG放大之后不会失真，Canvas放大后会失真
3.应用场景
图表
图标（icon）==>动态的加载小图标
动效
矢量图
4.SVG元素
<svg width="500px" height="500px" ></svg>
5.实现
1)直线
<style>line{stroke:#fff;}</style> // 必须写
<line x1="100" y1="100" x2="200" y2="100" ></line>
x1 y1是起始位置，x2 y2是在xy轴方向的长度
2)矩形
<rect x ="50" y ="50" width="100" height="100" rx="10" ry="20"></rect>
xy 矩形的起止点，width，height宽高 rx，ry是xy轴方向上的圆角
a.不用stroke()，默认有填充黑色背景
b.<style>rect{fill:transparent;stroke:green;}</style>
3) 圆形
<circle r="50" cx="220" cy="100"></circle>
r是半径，cx cy是中心点的位置
4）椭圆
<ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>
rx，ry水平方向，垂直方向的半径，cx，cy是中心点的位置
注意：上述标签是写在<svg></svg>元素之间
5）折线
<style>polyline{fill: transparent;stroke:deeppink;}</style>
<polyline points="23 45,67 34,23 45,65 67,78 78,45 34,56 23,45 67"></polyline>
是点的集合，每两个数字表示点的坐标
6)多边形
<style>polygon {fill:transparent;stroke: deeppink;}</style>
<polygon points="125 125,136 123,342 12" ></polygon>
可以将最后一条线进行闭合,","可加可不加，但是最好加上，容易区分
7）文本
<text x="125" y ="220">hello word</text>
x,y表示在x，y轴方向的位置描画文本
注意：stroke表示描边，fill表示填充