最近遇到一个问题，就是如何制作放大环动画。如果使用transform:scale放大环，会导致环变粗，看起来很难看，如下图：如果动画改成使用width/height，动画看起来会有点变形，如下图：这个圆是用border-radius:50%画的，所以width/height变大时，圆的半径会变大，但在变化的过程中会发生变形。如果改成带padding的动画，效果是一样的，那怎么办呢？一种方法是稍微减少动画时间，看起来可以缓解，但毕竟不是根本的解决办法。在网上搜索了一下，没有找到好的方法。有的是用JS动态计算宽/高，其实是一样的。***我想知道是否可以将SVG用于动画？我试过了，它奏效了。首先，我们需要使用SVG来绘制。之前我们用的是html+css，现在需要改一下。如以下代码所示：circle意思是画一个圆，圆心在(11,11)，半径8px，填充白色，描边#2492fc。如果设置fill="none"，则填充颜色将是透明的。相信很多人对SVG比较陌生，这里简单介绍一下。除了circle之外，其他常用的绘图标签元素如下图所示：绘图路径也有path，如下图：这个是用在线SVG绘图工具创建的，SVG代码会在绘制后显示。贝塞尔曲线可以用在路径中，是一种很常见的曲线，在CSS动画中也用到它来控制动画的速度：贝塞尔曲线（三阶）根据四个点绘制一条直线平滑曲线，矢量绘制的这种方法曲线在图形学中具有重要意义。SVG的基本元素就介绍到这里。现在我们来讨论如何做动画？我们要做半径的动画，如下图，使用animate标签：其中begin指定动画的开始时间，可以不定表示循环，或者指定具体的秒数，或者之后某个动画，也可以是mouseover/click/mouseout等事件，上面使用mouseover时，也就是悬停时，半径会由小变大。如果想让鼠标移开后收回，可以添加一个amimate，如下代码所示：如果要使用JS控件，可以获取这个animate元素，然后使用它的beginElement方法启动Animation，如下代码所示：//如果选中，放大动画if(checked){$("animate.magnify").beginElement();}//如果选中状态丢失，则缩小动画else{$("animate.shrink").beginElement();}这样，动画看起来会优雅很多，如下图所示：另外，可以使用CSS动画来控制SVG动画。以上只介绍了最简单的SVG动画。更复杂的效果请参考CSSTricks教程。比如可以做形状动画：再比如做一个沿着路径移动的动画：这篇文章主要想说的是：当你发现用html做动画不容易的时候，你可以尝试用svg来做，几行svg可以制作非常流畅的动画。比如本文《Animating Border》介绍了几种制作边框加粗动画的方法。作者用过border-width/outline/clip-path/linear-gradient/box-shadow等，效果其实不怎么好，不如直接用svg做吧。【本文为专栏作者“人人网FED”原创稿件，转载请联系原作者获得授权】点此查看更多本作者好文
