想起来学习SVG动画完全是因为做比赛时，需要用到沿着运动路径运动，作为一个前端萌新，css3显然无法做到，就现学了SVG动画。   一、 SVG animation元素

1. set

set虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（也可以是CSS属性值）。

3s后移动

2. animate

基础动画元素。实现单属性的动画过渡效果。类似Snap.svg的animate()方法支持的动画效果。

动画过渡

3. animateColor
一看就知道是颜色动画。不过，animate可以实现其功能与效果，因此，此属性已经被废弃。逝者已矣~

4. animateTransform
一看就知道实现transform变换动画效果的。知识是一脉相承的，这里的transform变换与CSS3的transform变换，以及Snap.svg.js中的transform()方法都是一个路数。

规模从1变大到1.5

5. animateMotion
让SVG各种图形沿着特定的path路径运动，跟上面的SVG代码相比，少个组标签g元素。无妨。只要动画元素是图形元素子元素就可以。rotate="auto"

6. 自由组合
实际制作时候的动画，不可能总是一个属性修改。

位置透明度同时变化

二、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值，直接让浏览器自己去判断，几乎无差错。

 3. from, to, by, values

　　from = “<value>“
    　　动画的起始值。
　　to = “<value>“
  　　  指定动画的结束值。
　　by = “<value>“
    　　动画的相对变化值。
　　values = “<list>“
    　　用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

 　　相互之间还是有制约关系的。有以下一些规则：

（不考虑values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。拿位移距离，如果from是100, to值为160则表示移动到160这个位置，但是，如果by值是160，则表示移动到100+160=260这个位置。

如果to,by同时出现，则by打酱油，只识别to.

如果to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。（据测试，FireFox确实如此，但是Chrome特意做了容错处理。如，本来是数值的属性，写了个诸如“a”这个不合法的值，其会当作“0”来处理，动画效果依然存在。）

values可以是一个值或多值。但在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by的值都会被忽略。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！

来回跑

总结下，也就是from-to动画、from-by动画、to动画、by动画以及values动画。

4. begin, end

begin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的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表示偏移值，数值前面有+或-. 应该指相对于documentdocument的begin值而言。
② syncbase-value基于同步确定的值。语法为：[元素的id].begin/end +/- 时间值. 就是说借用其他元素的begin值再加加减减，这个可以准确实现两个独立元素的动画级联效果。OK，看完下面的例子一定会豁然开朗，对于上面的offset-value也会有一定的认知。后面attributeName为y的元素的begin值是x.end. x.end中的x就是上面一个animate元素的id值，而end是动画元素都有的一个属性，动画结束的时间。因此，begin="x.end"意思就是，当id为x的元素动画结束的时候，我执行动画。非常类似于PowerPoint动画的“上一个动画之后”的选项。还可以增加一些偏移值，例如begin="x.end-1s", 就表示id为x的元素动画结束前一秒开始纵向移动

id为x的动画结束了开始，无缝连接

③ event-value这个表示与事件相关联的值。类似于PowerPoint动画的“点击执行该动画”。语法是：[元素的id].[事件类型] +/- 时间值. 举个例子，点击下图的圆圈圈，马儿它就会自己跑！

点击圆圈字会跑

注意，这类与事件关联的SVG需要内联在页面中，否则click什么的都是徒劳。

④ repeat-value指重复多少次之后干嘛干嘛。语法为：[元素的id].repeat(整数) +/- 时间值. 举个例子，下面这个马儿会在水平运动2次之后，斜向运动，begin="x.repeat(2)"指id为x的元素的动画重复2次后执行~~

x执行2次后再执行y

⑤ accessKey-value定义快捷键。即按下某个按键动画开始。语法为：accessKey(" character "). character表示快捷键所在的字符，举个例子，按下s键动画走起。SVG代码如下：

按键盘s键执行

⑥ wallclock-sync-value指真实世界的时钟时间定义。时间语法是基于在ISO8601中定义的语法。