SVG实战开发学习（九）——让svg动起来（五种动画元素）
【<animate>元素】
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="50">
<animate attributeType="XML" attributeName="x"
from="50" to="300" dur="3s" begin="3s"
restart="always" repeatCount="3">
</animate>
</rect>
<circle cx="100" cy="200" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="XML" attributeName="r"
from="0" to="30" dur="3s"
restart="always" repeatCount="3">
</animate>
</circle>
<circle cx="100" cy="300" r="30" style="fill:none;stroke-width:3;stroke:black">
<animate attributeType="CSS" attributeName="fill"
from="#000000" to="#F40" dur="10s"
restart="always">
</animate>
</circle>
</svg>
</body>
</html>
第一个是一个水平移动的矩形，变化的属性是矩形在X轴上的坐标，在3S内从（50,50）移动到（300,50）处，动画开始播放是在SVG文档完全解析3秒后，重复播放3次。
第二个是一个从圆心不断变大的类似水波纹的效果，变化的属性是圆的半径，半径从0一直变化到30，就产生了这样的效果。
第三个是变化的是css的属性"fill"，最终的效果是圆的填充颜色在10秒内从黑色变成红色。
attributeName:变化的属性名称
attributeType：变化的类型，是HTML还是css
【<set>元素】
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="200" height="300">
<set attributeType="XML" attributeName="visibility" fill="remove" to="hidden" begin="3s"/>
</rect>
</svg>
</body>
</html>
<set>元素是使用在非数值属性上的，所谓非数值就是那些开关变量属性、枚举属性。使用后的动画过程不是渐变的，而是"一次到位"————突变，因为属性值都是非数值的，无法插值计算。
此例就是让一个矩形在三秒钟后消失。"visibility"是个枚举属性，能取的值只有3个"visible"、"hidden"和"inherit"
【<animateMotion>元素】
使用该元素可以获得让SVG图形沿着事先定义好的路径移动。它有一些自己专有的属性。
a)path="<path-data>"：定义动画播放过程中所用到的路径数据，其定义格式同<path>元素。
b)rotate="<angle>|auto|auto-reverse"：定义SVG图形在沿着路径移动的过程中，其自身能否随着路径移动。如果该取值是一个角度值，那么动画对象在开始旋转该角度后，再保持这个角度进行移动，默认值是0；"auto"表示动画对象沿着路径移动时，路径如果出现拐弯，该对象也随之拐弯。"auto-reverse"表示动画对象逆时针旋转180度后沿着路径前进，也是随着路径拐弯而拐弯。
<body>
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(150,150)">
<path d="M0,0 L70,70 L150,270" style="fill:none;stroke:black;stroke-width:2"/>
<text x="0" y="0" font-size="37" visibility="hidden"
stroke="black" stroke-width="2">
AnimateMotion Effect
<set attributeName="visibility"
attributeType="CSS" to="visible"
begin="1s" dur="5s" fill="freeze"/>
<animateMotion path="M0,0 L70,70 L150,270"
begin="1s" dur="5s" fill="freeze" rotate="auto"/>
</text>
</g>
</svg>
</body>
</html>
实例中演示的动画效果是一段文字沿着一条带拐弯的路径移动的。
我们先使用了<set>元素，使得文字先显示出来，然后沿着路径移动。设置"rotate"属性为"auto"，使得文字遇到那个拐弯时继续"贴"着路径前进，而不是保持原来的方向："fill"属性设置为"freeze"，表示动画播放完毕后，就保持在终止的画面状态。
【<animateColor>元素】
该元素专门用于需要颜色变化的动画，它的使用与<animate>元素基本相同，不同的是它的"from"、"to"、"by"和"values"等属性的取值必须是颜色值。
【<animateTransform>元素】该元素可以让SVG的图元进行坐标变换的动画效果，它也有自己特有的一个属性。
type="translate | scale | rotate |skewX |skewY"：定义动画所使用的坐标转换的类型，"translate"是平移变换，"scale"是伸缩变换，"rotate"是旋转变换，"skewX"和"skewY"分别是在X轴和Y轴上的歪斜变换。
【注意事项】
a)通用属性"attributeName"的取值必须是"transform"。
b)不同的"type"值使得"from"、"to"、"by"等属性的含义也变得不同。当取值为"scale"时，
