SVG描边动画(stroke animation)，也可以叫做"路径绘制动画"(path drawing animation)，路径描边动画或路径动画(path animation)。其实现的效果类似描边一样，将图形绘制出来，即沿着线条绘制，因此也被称为"线条动画"(line animation)

SVG是一种XML格式的图形，和DOM类似，可以使用CSS动画(关键帧keyframes)实现各种动效。

使用图片或css可能也可以实现一些动画效果，但是，svg图形可以无限放大缩小，动画效果的实现相较也比较简单。比图片灵活，而结合CSS动画又比纯CSS动画强大。

SVG描边动画相关的3个属性:

stroke：用来定义边框的颜色。

stroke-dasharray：定义dash和gap的长度，分隔实线和间隔的值。实现边框虚线的效果，和CSS中 dash 的效果一样。如：stroke-dasharray:5, 5表示，按照实线为5，间隔为5的排布重复下去。如下图：

stroke-dasharray:5 同样表示实线5，间隔5的虚线排列下去。 stroke-dasharray:5, 3, 10 表示实线5，间隔3，实线10，然后间隔5，实线3，间隔10，实线5...不断的循环填满线条。

stroke-dashoffset：设置dasharray定义的dash线条开始的位置。值为 number || percentage。百分数是相对于SVG的viewport。通常结合 dasharray 可以实现描边动画效果。

SVG线条描边动画是通过stroke-dashoffset和stroke-dasharray实现的，分为两个步骤：

通过 dasharray 将实线部分增加至全长。比如：一条 path 的长度为300，如果把 SVG 中 path 的 stroke-dasharray 的值设置为300,300，即表示这条 path 将会按照实线为 300，间隔为 300 的排布重复下去。所以默认的情况下，我们只会看到一条300长度的实线，间隔300的线段由于已经在画布外，所以是不可见的。

同时，通过 stroke-dashoffset 移动新增的实线部分，造成线段移动的效果。比如由: stroke-dashoffset:500 变为 stroke-dashoffset:0。

如下，通过一个示例了解描边的实现过程：

一条长200的线条。

因为 stroke-dasharray 和 stroke-dashoffset 的值都是200，所以这条线段显示的是长为200的gap，没有线条。把 stroke-dashoffset 的值设置为0，dash线段就显示了出来，如下动图所示：

实际上，只要gap的长度大于线段的长度，并且dashoffset与gap长度相同即可，当然dash的长度最好与线段长度相同。最好的是四者均相同。

间隔的距离要为实线的长度

描边的动画的另一个实现思路是，通过调整，递增虚线中实线的长度，使其逐渐占满整条线段。这样就不需要涉及stroke偏移的调整。

通过这个原理，结合CSS的transition或animation就可以轻松实现一个描边动画：

通过点击切换class，实现描边的变化。

注：

对于描边动画，虽然要描边的总长度不变，但是可以通过改变虚线的长短实现绘制的快慢，这需要实线和时间的配合。原因在于同一时间内，线段短的肯定要比线段长的移动的快才能绘制完成(offset偏移的大小)。

为了优化效果，多个图形的路径动画，还可以通过延迟、调整执行时长等，实现更好的效果。

描边动画：stroke animation。或者路径绘制动画：path drawing animation，有时也称为路径描边动画，路径动画path animation

完成一个如下的动画效果：

这个动画由一个颜色填充动画、描边线条动画和放大动画三个动画组成。

首先看一下svg图片的代码，由一个圆和对勾path组成，首先默认看一下效果

viewBox的作用在于以完整，或以设置的视野，将图像呈现到svg中，方便调整svg的大小，而不影响看到的(显示的)图形。这一点可以从测试使用中体会到

原动画的初始状态为空(各个元素不显示)，需要描边的动画是圆圈和中间的对勾。

初始需要把circle的fill为none，没有填充颜色，stroke-dasharry 和 stroke-dashoffset 的值设置为 circle 的长度值。把 path 元素的 stroke-dasharry 和 stroke-dashoffset 的值设置为 path 的长度值。关于长度值的获取可以使用getTotalLength()，下一小部分有介绍

圆和对勾的线条描边动画，关键帧中目标状态把 stroke-dashoffset 设置为0：

填充和缩放的动画：

完整代码如下：

可以使用JavaScript 的 API获取整条 path 的长度值，只需两行代码：

同样，circle的长度也可以使用getTotalLength()获取

关于svg图形元素的长度，可以在AI的"文档信息"面板中看到：

先看一下如下六边形的svg：

添加如下css，实现描边动画：

可以看到动画效果实现的"很乱"，

这是因为path路径中使用了多个图形路径，这样就不能控制路径的起始位置，使用描边动画会多条线一起变化，不能控制顺序。导致变化时很乱。

要控制path路径的顺序，解决办法就是拆分path中的多条线(d属性中设置的多路径分别拆分为多个单条路径)。

操作办法一个是通过代码直接拆开；或者在AI中，用钢笔工具一笔一笔照着轮廓勾画出路径，然后导出为path元素。

修改后如下：

关于path中多个路径的情况，在实际使用中会比这个复杂的多，此处只是个说明。处理起来也比较烦人，可能需要结合其他动画原理，重点还是图形中的实现元素要合理，便于操作控制。

比如此处例子，中间的六边形不用变，围绕六边形的边只要一条闭合线条就可以，但是原svg代码用了很多条线，这样在移动和控制时，效果就会很不好看。

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情