svg 矢量图
svg绘制矢量图；canvas用于绘制位图
svg使用xml格式绘制图形
svg要有一个根节点，叫svg标签，就相当于html
svg如果不设置大小，默认占用面积300*150
定义矩形
rect标签 属性：width，height，x，y，rx，ry，fill，stroke-width，stroke，style
style="fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5"
fill-opacity和opacity的区别：fill-opacity只改变填充色的透明度；opacity改变fill和stroke的透 明度都改变
定义圆
circle：cx cy 定义圆的圆心坐标 r定义半径
定义椭圆
ellipse：cx cy 定义圆心坐标 rx定义x轴半径，ry定义y轴半径
定义直线
line：x1 y1 定义起始坐标 x2 y2 定义结束坐标 必须结合stroke绘制
定义多边形
polygon points=" " 写多边形角的坐标
定义折线
polyline points=" " 折点的坐标
定义路径
path d="M"
M 是起点坐标 L 是相邻点坐标 Z 让路劲构成闭合回路
H 代表水平的线条 默认y轴上的值一样
V 代表垂直的线条 默认x轴上的值一样
A 后面有七个值：X半径，Y半径，角度，弧长（0 小弧；1 大弧），方向（0 逆时针；1 顺时针），终点X坐标，终点Y坐标
transfrom：转换svg中的一个属性translate rotate scale
平移，旋转都是以起点（0，0）（svg的左上角）点为参考点，而css3中以元素的中心点为参考点
G 用于将相关元素进行组合
G 身上的属性，子元素都会继承，但是g上的属性都必须是显现属性，不是svg元素私有的，比如g上的圆心坐标不行
text：用于定义文本 x y xy 的值在字体的左下角
text-anchor="middle" 让字体居中
lmage 绘制图片
x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度"（必须）
height="图像的高度"（必须）
xlink:href="图像的路径"（必须）
use 用于复制元素 x y
xy是相对原始的元素的坐标位置，不是相对的svg的0，0点坐标
animate：写在需要动画元素的中间
attributeName form to dur repeatCount="indefinite"(无限次)
attributeName：目标属性名称；
from="" to="" : 从哪到哪；
dur：持续时间；
repeatCount="indefinite" 动画的无限次播放