更新于2017-02-24

据有些资料显示，Chrome 45 & Opera 32版本之后 SMIL会在控制台console会有警告（虽然本人没有看到），以后有可能不支持的风险。我觉得应该是打算靠CSS来撑场子，因为很巧的是，Chrome 46和Opera 33正好开始支持CSS Motion Path了，真是心机浏览器。

//zxx: 本文的SVG在有缓存时候是无动画效果，此时您可以试着【右键-新标签页打开图片】。

一、SVG SMIL animation概览

1. SMIL是什么？

SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。

SMIL允许你做下面这些事情：

动画元素的数值属性（X, Y, …）

动画属性变换（平移或旋转）

动画颜色属性

沿着运动路径运动

注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，呵呵，CSS3只能蹲在墙角画圈圈了！

SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。

2. 强大之处是？

除了可以实现「路径动画」，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>