svg基础

SVG是一种基于XML中描述二维图形的语言。
SVG基于XML，意味着DOM每一个元素都是可用的，也就是在SVG中，每一个
图形都是对象，如果有一个对象发生改变，那么全局重新生成图形。

Canvas
能够画二维图片，但是基于JS
能够根据像素重新生成。

但是注意：在Canvas中一旦生成该图片，就会被浏览器所抛弃。
只要图形位置发生改变，通常情况下Canvas会覆盖上一个图形。

Canvas：依赖分辨率，不支持事件处理器。可以保存PNG图片。最适合做游戏，做动画。

SVG：不依赖分辨率，支持事件处理器。不可以保存图片。比较适合做地图更新。

SVG：
1、矩形： rect
   <rect width="300" height="300" style="stroke-width: 3px; stroke:blue;fill:red"></rect>
2、线段： line (x1,y1,x2,y2) 起始坐标 结束坐标
   <line x1="100" y1="200" x2="450" y2="200" width="300" height="200" style="stroke:blue;stroke-width:3"></line>
3、文字：text
   <text font-family="微软雅黑" font-size="100" x="100" y="150">H</text>
4、圆：circle
   <circle cx="100" cy="100" r="50" fill="red"></circle>
5、椭圆：ellipse
   <ellipse cx="横坐标" cy="纵坐标" rx="x轴长度" ry="y轴长度"
   fill="red">
6、折线： polyline
     <polyline points="0,0,0,20 20,20 20,40 40,40"
fill="red" stroke-width="3" stroke="orange"></polyline>
7、多边形：polygon 注意(x,y)表示每个角的坐标
     <polygon points="100,10 40,180, 190,60 10,60 160,180" fill="red" stroke-width="3" stroke="orange"></polygon>
8、路径： path

SVG Animation : SMIL 结合形成动画。
SMIL: 同步多媒体集成的语言。
1、改变动画元素的数值属性 x y
2、动画属性变换(平移，旋转)
3、动画颜色属性改变
4、沿着特定路线走

1、<set> 闪现
<g>
<text font-family="微软雅黑" font-size="120" y="130" x="100">猴塞利<set attributeName="x" attributeType="XML" to="500" begin="2s"/> //attributeName 方向。attributeType 类型  to 移动距离 begin 几秒开始移动
</text>
</g>


2、<animate> 过渡效果
<g>
<text font-family="微软雅黑" font-size="50" y="130" x="100">猴
<animate attributeName="x" from="100" to="700" begin="0s"
dur="6s" repeatCount="indefinite"></animate>
//from 起始位置 to 结束位置 begin 多少秒后开始 dur 执行时间
repeatCount 重复次数 indefinite 为循环。
</text>
</g>

3、<animateColor>

4、<animateTransform> 旋转等特定效果
<animateTransform from="0 160 160" to="360 160 160" attributeName="transform" begin="0s" dur="1s" type="rotate" repeatCount="indefinite"></animateTransform>
//from 起始角度 圆心角度

放大缩小，type=scale 注意：from=1 原始大小  to=倍数大小
<animateTransform attributeName="transform" from="1" to="30" begin="0s" dur="50s" type="scale" repeatCount="indefinite"></animateTransform>

5、<animateMotion>  Path效果
<path d="M10,80 q100,120  120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />