1. SMIL是什么？
SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。
SMIL允许你做下面这些事情：
- 动画元素的数值属性（X, Y, …）
- 动画属性变换（平移或旋转）
- 动画颜色属性
- 沿着运动路径运动
注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，呵呵，CSS3只能蹲在墙角画圈圈了！
2. 强大之处是？
除了可以实现「路径动画」，SVG animation最强大的地方在于：只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。
唷，不信？给你个马，看它跑不跑！
<svg width="320"height="320"xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei"font-size="120"y="160"x="160">马</text> <animateTransform attributeName="transform"begin="0s"dur="10s"type="rotate"from="0 160 160"to="360 160 160"repeatCount="indefinite"/> </g> </svg>
5大元素，1统江湖。
- <set>
- <animate>
- <animateColor>
- <animateTransform>
- <animateMotion>
这5个元素犹如篮球场上的5名队员，分别实现不同类别的动画。
1. set
set意思设置，此元素没有动画效果。你可能会疑问了，既然这个元素没有动画效果，怎么会是animation五大天团成员之一呢？
虽然set虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（也可以是CSS属性值）。
举个例子，下面这个「马」会在3秒之后从横坐标160的位置移动60这个位置。
<svg width="320"height="320"xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei"font-size="120"y="160"x="160">马 <set attributeName="x"attributeType="XML"to="60"begin="3s" /> </text> </g> </svg>
这里出现了attributeName,attributeType等属性。其含义有些顾名即可思意，有些需要点拨，这些属性后面会统一讲解。
2. animate
基础动画元素。实现单属性的动画过渡效果。
<svg width="320"height="320"xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei"font-size="120"y="160"x="160">马 <animate attributeName="x"from="160"to="60"begin="0s"dur="3s"repeatCount="indefinite" /> </text> </g> </svg>
这里除了新增from,dur这两个通俗易懂的属性外，还蹦出了个repeatCount属性，同上，含义会后面统一讲解。
3.animateColor
一看就知道是颜色动画。不过，animate可以实现其功能与效果，因此，此属性已经被废弃。可谓因为兄弟相争而年少陨落的天王。逝者已矣，过去的就让它过去吧~~
4. animateTransform
此元素就是一开始给大家开眼界用到的那个元素。一看就知道实现transform变换动画效果的。知识是一脉相承的，这里的transform变换与CSS3的transform变换，以及Snap.svg.js中的transform()方法都是一个路数。
<svg width="320"height="320"xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei"font-size="80"y="100"x="100">马</text> <animateTransform attributeName="transform"begin="0s"dur="3s"type="scale"from="1"to="1.5"repeatCount="indefinite"/> </g> </svg>
5. animateMotionanimateMotion元素可以让SVG各种图形沿着特定的path路径运动~
<svg width="360"height="200"xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei"font-size="40"x="0"y="0"fill="#cd0000">马 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0"begin="0s"dur="3s"repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0"stroke="#cd0000"stroke-width="2"fill="none" /> </svg>
不过上面这个马走得有点假，怎么马儿一直都是水平的啊，这不符合物理学定律，是不科学的。我们可以小小处理下，让表现更真实：
<svg xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s"rotate="auto" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke- fill="none" />
</svg>6. 自由组合
实际制作时候的动画，不可能总是一个属性修改。比方说，位置和透明度同时变化，怎么办呢？So easy! 直接组合就好了。
<svg width="320"height="200"xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei"font-size="120"y="160"x="160">马 <animate attributeName="x"from="160"to="60"begin="0s"dur="3s"repeatCount="indefinite" /> <animate attributeName="opacity"from="1"to="0"begin="0s"dur="3s"repeatCount="indefinite" /> </text> </svg>
OK, 至此，体验SVG animation动画效果的旅程就结束了。下面进入参数详解篇。
三、SVG animation参数详解1. attributeName = <attributeName>
要变化的元素属性名称，① 可以是元素直接暴露的属性，例如，对于本文反复出现的「马」对应的text元素上的x,y或者font-size; ② 可以是CSS属性。例如，透明度opacity.
2. attributeType = “CSS | XML | auto”attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x,y以及transform就属于XML,opacity就属于CSS.auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。
不知大家有没有和我一样的疑问：“既然浏览器酱可以自己判断属性类别，那这个属性还有什么意义吗？”我琢磨着，可能某些属性，XML能起作用，CSS也能起作用，例如font-size, 此时就需要明确下归属。
3. from, to, by, values
上面4个属性是一个家族的，是最具哲理的一个家族。他们解决的是非常有哲理的问题：你从哪里来？要到哪里去？……
- from= “<value>“
- 动画的起始值。
- to= “<value>“
- 指定动画的结束值。
- by= “<value>“
- 动画的相对变化值。
- values= “<list>“
- 用分号分隔的一个或多个值，可以看成是动画的多个关键值点。
from,to,by,values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：
a.如果动画的起始值与元素的默认值是一样的，
from参数可以省略。b.（不考虑
values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。拿位移距离，如果from是100,to值为160则表示移动到160这个位置，但是，如果by值是160，则表示移动到100+160=260这个位置。c.如果
to,by同时出现，则by打酱油，只识别to.d.如果
to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。但是，据我测试，FireFox浏览器确实如此，但是Chrome特意做了写容错处理。例如，本来是数值的属性，写了个诸如a这个不合法的值，其会当作0来处理，动画效果依然存在。e.
values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from,to,by的值都会被忽略。那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from,to/by只能驾驭两个，此时就是values大显身手的时候了！
总结下，也就是from-to动画、from-by动画、to动画、by动画以及values动画。
4. begin, endbegin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的beigin="3s"只是最简单最基本的表示。
begin的定义是分号分隔的一组值。看到没？是一组值，单值只是其中的情况之一。例如，beigin="3s;5s"表示的是3s之后动画走一下，6s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）。所以，如果一次动画时间为3s, 即dur="3s"，同时没有repeatCount属性时候，我们可以看到动画似乎连续执行了2次。
begin的单值除了普通value，还有下面这些类别的value：
offset-value|syncbase-value|event-value|repeat-value|accessKey-value|media-marker-value|wallclock-sync-value|"indefinite"
①offset-value表示偏移值，数值前面有+或-. 应该指相对于document的begin值而言。
②syncbase-value基于同步确定的值。语法为：[元素的id].begin/end +/- 时间值. 就是说借用其他元素的begin值再加加减减，这个可以准确实现两个独立元素的动画级联效果。OK，看完下面的例子一定会豁然开朗，对于上面的offset-value也会有一定的认知。
这样的代码：
<svg xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="0s" dur="3s" fill="freeze" />
<animate attributeName="y" to="100"begin="x.end" dur="3s" fill="freeze" />
</text>
</svg>于是，实现了一个马儿折线跑的效果，先横向移动，再无缝纵向移动。
begin="x.end"意思就是，当id为x的元素动画结束的时候，我执行动画。非常类似于PowerPoint动画的“上一个动画之后”的选项。
当然，我们还可以增加一些偏移值，例如begin="x.end-1s", 就表示id为x的元素动画结束前一秒开始纵向移动。
③event-value这个表示与事件相关联的值。类似于PowerPoint动画的“点击执行该动画”。语法是：[元素的id].[事件类型] +/- 时间值.
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50"></circle> <text font-family="microsoft yahei" font-size="120" y="160" x="160">马 <animate attributeName="x" to="60" begin="circle.click"dur="3s" /> </text> </svg>
也可以加上偏移值begin="circle.click+2s".即点击后2s开始执行动画。
④repeat-value指重复多少次之后干嘛干嘛。语法为：[元素的id].repeat(整数) +/- 时间值. 举个例子，下面这个马儿会在水平运动2次之后，斜向运动。
<svg xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="y" to="100" begin="x.repeat(2)" dur="3s" fill="freeze" />
</text>
</svg>begin="x.repeat(2)"指id为x的元素的动画重复2次后执行。
⑤accessKey-value定义快捷键。即按下某个按键动画开始。语法为：accessKey(" character ").character表示快捷键所在的字符，举个例子
begin="accessKey(s)"，表示按下s键后执行动画。
5. durdur属性值比begin简单了好几层楼，就后面两种：常规时间值 |"indefinite".
“常规时间值”就是3s之类的正常值；"indefinite"指事件无限。试想下，动画时间无限，实际上就是动画压根不执行的意思。因此，设置为"indefinite"跟没有dur是一个意思，与dur解析异常一个意思。