svg基础
SVG是一种基于XML中描述二维图形的语言。
SVG基于XML，意味着DOM每一个元素都是可用的，也就是在SVG中，每一个
图形都是对象，如果有一个对象发生改变，那么全局重新生成图形。
Canvas
能够画二维图片，但是基于JS
能够根据像素重新生成。
但是注意：在Canvas中一旦生成该图片，就会被浏览器所抛弃。
只要图形位置发生改变，通常情况下Canvas会覆盖上一个图形。
Canvas：依赖分辨率，不支持事件处理器。可以保存PNG图片。最适合做游戏，做动画。
SVG：不依赖分辨率，支持事件处理器。不可以保存图片。比较适合做地图更新。
SVG：
1、矩形：rect
<rectwidth="300"height="300"style="stroke-width:3px;stroke:blue;fill:red"></rect>
2、线段：line(x1,y1,x2,y2)起始坐标结束坐标
<linex1="100"y1="200"x2="450"y2="200"width="300"height="200"style="stroke:blue;stroke-width:3"></line>
3、文字：text
<textfont-family="微软雅黑"font-size="100"x="100"y="150">H</text>
4、圆：circle
<circlecx="100"cy="100"r="50"fill="red"></circle>
5、椭圆：ellipse
<ellipsecx="横坐标"cy="纵坐标"rx="x轴长度"ry="y轴长度"
fill="red">
6、折线：polyline
<polylinepoints="0,0,0,2020,2020,4040,40"
fill="red"stroke-width="3"stroke="orange"></polyline>
7、多边形：polygon注意(x,y)表示每个角的坐标
<polygonpoints="100,1040,180,190,6010,60160,180"fill="red"stroke-width="3"stroke="orange"></polygon>
8、路径：path
SVGAnimation:SMIL结合形成动画。
SMIL:同步多媒体集成的语言。
1、改变动画元素的数值属性xy
2、动画属性变换(平移，旋转)
3、动画颜色属性改变
4、沿着特定路线走
1、<set>闪现
<g>
<textfont-family="微软雅黑"font-size="120"y="130"x="100">猴塞利<setattributename="x"attributeType="XML"to="500"begin="2s"/>//attributeName方向。attributeType类型to移动距离begin几秒开始移动
</text>
</g>
2、<animate>过渡效果
<g>
<textfont-family="微软雅黑"font-size="50"y="130"x="100">猴
<animateattributename="x"from="100"to="700"begin="0s"
dur="6s"repeatCount="indefinite"></animate>
//from起始位置to结束位置begin多少秒后开始dur执行时间
repeatCount重复次数indefinite为循环。
</text>
</g>
3、<animateColor>
4、<animateTransform>旋转等特定效果
<animateTransformfrom="0160160"to="360160160"attributename="transform"begin="0s"dur="1s"type="rotate"repeatCount="indefinite"></animateTransform>
//from起始角度圆心角度
放大缩小，type=scale注意：from=1原始大小to=倍数大小
<animateTransformattributename="transform"from="1"to="30"begin="0s"dur="50s"type="scale"repeatCount="indefinite"></animateTransform>
5、<animateMotion>Path效果
<pathd="M10,80q100,120120,20q140,-50160,0"stroke="#cd0000"stroke-width="2"fill="none"/>