更新于2017-02-24
据有些资料显示，Chrome 45 & Opera 32版本之后 SMIL会在控制台console会有警告（虽然本人没有看到），以后有可能不支持的风险。我觉得应该是打算靠CSS来撑场子，因为很巧的是，Chrome 46和Opera 33正好开始支持CSS Motion Path了，真是心机浏览器。
//zxx: 本文的SVG在有缓存时候是无动画效果，此时您可以试着【右键-新标签页打开图片】。
SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。
SMIL允许你做下面这些事情：
动画元素的数值属性（X, Y, …）
动画属性变换（平移或旋转）
动画颜色属性
沿着运动路径运动
注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，呵呵，CSS3只能蹲在墙角画圈圈了！
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。
除了可以实现「路径动画」，SVG animation最强大的地方在于：™只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。你会发现，我勒个去，原来要实现个动画效果这么简单。什么CSS3动画，哪边凉快哪边呆着吧！
唷，不信？给你个马，看它跑不跑！
<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>
如何？是不是看到了童年梦幻的旋转木马效果？ 纳尼？你没看到。请检查您现在使用的浏览器，IE浏览器(包括IE11)是不支持的哦，亲~
5大元素，1统江湖。 这5个元素犹如篮球场上的5名队员，分别实现不同类别的动画。 set意思设置，此元素没有动画效果。你可能会疑问了，既然这个元素没有动画效果，怎么会是animation五大天团成员之一呢？ OK, 这样的，虽然set虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（也可以是CSS属性值）。 举个例子，下面这个「马」会在3秒之后从横坐标160的位置移动60这个位置。
1. set
