类似于效果图这样的动画效果：
1.1 SVG animation概述
1.1.1 什么是SMIL？
来。上百度粑粑看看SMIL是什么鬼：
对，我知道你看不懂。我也看不懂。
总的来说，SVG动画就是基于这种语言的。
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。
SMIL允许你做一下的这些事情：
动画元素的数值属性（X, Y, …）
动画属性变换（平移或旋转）
动画颜色属性
沿着运动路径运动
最后一条沿着运动路径运动。这一条CSS3是做不到的。前面三项CSS3都是可以做到的。
1.1.2 初识animation
SVG的animation很强大，只需要在页面上放几个animation元素就能够实现动画效果。不需要任何的CSS3和JS代码。
旋转的欢老大：
1.2 SVG animation元素及效果概览
五大元素分别实现不同类型的动画效果
1.2.1 set
set译为设置，可以在特定时间之后修改某个属性值（也可以是CSS属性值）。
set没有动画效果，不能触发连续的动画，但是，可以实现基本的延迟功能。所以也在动画元素的五个之一。
让一个圆在3秒之后移动一个位置：
以上set的属性中出现了attributeName，attributeType。元素的属性有些是一样的。所以放在最后一并详解。
1.2.2 animate
animate是一个基础动画元素，实现单属性的动画过度效果。
小圆从右向左移动
那么上面的案例当中又多了from，dur，repeatCount这几个属性。你们先猜着什么意思。
1.2.3 animateTransform
这个元素是实现tranform变化动画效果的。对于tranform这个单词是不是有那么点点熟悉。对对对，就是CSS3当中的那个transform变换。
以上效果一个慢慢长大的圆
以上代码实现的效果一个绕圆转的小圆。恩。你需要想象一下。
1.2.4 animateMotion
哈哈哈，这个就强大的，之前那个太阳系的案例。就是用这个元素所做的效果。希望大家还能记得。
回忆一下，就是这个。就是这个。
一个沿着路径运动的小圆球
1.2.5 animateColor
字面意思应该就能猜出这个元素是做什么用的，但是现已经被废弃了。
参数说明请见下集详解~有兴趣加群（295383988）获取资源，小白讨论技术。
