HTML5 中对于 SVG 的引入极大的丰富了 Web 页面的表现力，而且，SVG 本身就支持动画。通过使用 <animate/> 或者 <animateTransform/> 元素可以让 SVG 元素产生动画，还有更加高端的 <animateMotion/> 可以产生沿着路径移动的动画。

但是在实际的使用中发现，SVG 的动画帧率比较低，甚至存在直观上能够感受到的卡顿现象，尤其是在移动设备上查看的时候。如何能够让 SVG 的动画也达到丝般顺滑的效果？

如果您的 SVG 动画只是改变元素的位置、大小、旋转等，那么可以将需要动画展示的 SVG 元素封装到一个 DIV 元素中，然后使用 CSS3 动画，让 DIV 元素产生动画，那么可以收获相当平滑的效果。因为 SVG 元素动画还是要重新计算元素的数据信息，而使用 CSS3 对 SVG 的容器 DIV 元素进行动画是不需要重新计算 SVG 的数据的，所以效果要好很多。

点击查看动画实例

先看一下，直接使用 <animateTransform/> 元素和使用 DIV 容器 + CSS3 动画的帧率对比：

使用 animateTransform 元素	使用 DIV 容器 + CSS3 动画

可以看出来，使用 <animateTransform/> 产生的 SVG 动画，帧率大概在 30 FPS 左右，而使用 DIV 容器 + CSS3 动画，帧率可以达到 60 FPS 左右，很明显这两种方式还是有很大的直观感受的区别的。

附录代码：

直接使用 <animateTransform/> 的代码如下：

使用 DIV 容器 + CSS3 动画的代码如下：

动画样式：

HTML 代码：

注：截图中的各种颜色的方块是使用 JavaScript 代码随机生成的几个 <rect/> 元素。可以参考下面的代码：