SVG路径描边动画效果

一、效果

简而言之，就是让SVG的描边像是有人绘制一样的动画效果。

三、必知的基础知识

SVG中有个比较重要的属性分支，stroke ：“描边”。

1，stroke 描边颜色

none没有颜色

<color> 就是我们常规的颜色值。RGBA, HSBA都支持。red,green,#000,#ccc等

currentColor略高深，可理解为：共享父级但不越过SVG元素的XML中color(style中的)值；可以让路径绘制的文字直接继承父标签的color颜色值。

2， stroke-width 描边的粗细。stroke-width:2px;

3， stroke-linecap 描边端点表现方式，可用值有：butt, round, square, inherit

4，stroke-linejoin 描边转角的表现方式。可用值有：miter, round, bevel, inherit

5，stroke-miterlimit 描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。具体干嘛的，大家可查查其他资料。

6，stroke-dasharray 虚线描边。可选值为：none, <dasharray>, inherit

none表示不是虚线；

<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值

inherit表继承

7，stroke-dashoffset 虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承

8，stroke-opacity 表示描边透明度。默认是1.

而与本文相关的动画效果相关的就是stroke-dasharray和stroke-dashoffset。

三、stroke-dasharray和stroke-dashoffset

stroke-dasharray虚线设置可以是一个值也可以是一个数组，具体表现如下：

<svg>
    <g>
        <!--stroke-dasharray: 20;从左往右依次 虚线长度和间距为20-->
        <path d="M10,20 L300,20" style="stroke-dasharray: 20;stroke: green;"></path>
        <!--stroke-dasharray: 20,10;从左往右依次 虚线长度20，间距10-->
        <path d="M10,50 L300,50" style="stroke-dasharray: 20,10;stroke:green;"></path>
        <!--stroke-dasharray: 20,5,5,10;从左往右依次 第一条虚线长度20，第一个间距5，第二条虚线长度5，第二条间距10-->
        <path d="M10,80 L300,80" style="stroke-dasharray: 20,5,5,10;stroke: green;"></path>
    </g>
</svg>

stroke-dashoffset 虚线向左位移（当虚线值较小，不断位移不断有虚线显示）

<svg>
    <g>
        <!--stroke-dashoffset: 0-->
        <path d="M10,20 L300,20" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:0"></path>
        <!--stroke-dashoffset: 20 虚线向左位移20，第一条虚线刚好只显示一半-->
        <path d="M10,50 L300,50" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:20"></path>
        <!--stroke-dashoffset: 40  虚线向左位移40，第一条虚线刚好只全部被遮住-->
        <path d="M10,80 L300,80" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:40"></path>

        <path d="M10,110 L300,110" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:70"></path>

    </g>
</svg>

一个特殊情况
我们现在都试想一下，如果stroke-dasharray和stroke-dashoffset值都很大，超过了描边路径的总长度，会怎么样？

用中文解释就是，一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样。

四、CSS3 animation的支持

内联SVG的强大之处在于，其本身也是个HTML元素，能被CSS属性控制，处理传统的高宽定位、边框背景色等，SVG自身的一些特殊属性也能被CSS支持，甚至在CSS3 animation动画中。

于是，我们上面探讨的SVG描边动画效果能够轻松使用CSS3 animation实现，无需任何JavaScript，这就是一开始Demo页面的实现。

其CSS代码重点：

path {stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s linear infinite;
}@keyframes dash {to {stroke-dashoffset: 0;}
}

1000没有什么特殊含义，只是足够大，保证比比每个路径的长度大即可，你也可以是1500，区别就是描边速度更快一点。

属性CSS3 animation的小伙伴应该一看就看出上面代码的含义的，5秒动画，stroke-dashoffset从1000到0. 描边动画形成。

以上CSS代码几乎可以通用。无论你的SVG路径多么复杂，都能以描边动画形式呈现。根据自己的测试，IE10+下没有动画效果，不

是CSS不支持SVG的stroke相关属性，而是animation中不支持stroke相关属性的动画。

以上效果有什么用的，我试想了以下一些场景：演示时候分步展示一些要点；或者图片等hover描边效果；或者网站tip注意项的箭头引导提示效果等，都很有用。技术+你脑中不断的创意，才有精彩纷呈的创新体验。

五、路径的长度

如果您想知道路径，或线条的准确长度。可能需要借助JavaScript，类似下面的代码：

var path = document.querySelector('path');
var length = path.getTotalLength();

六、炒个板栗

<svg  x="0px" y="0px" width="340px" height="333px" xmlns="http://www.w3.org/2000/svg"  >
  <path id="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
   s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
   C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

1，未设置stroke-dasharray时效果如下：

2，只设置stroke-dasharray为10.

path {stroke-dasharray: 10;
}

效果如下：

3，设置stroke-dasharray:50，设置stroke-dashoffset 并结合css3 animation动画使其运动起来

path {stroke-dasharray: 50;
    animation: dash 5s linear ;
}
@keyframes dash {0%   {stroke-dashoffset: 1000;  }100% {stroke-dashoffset: 0;}
}

4,将stroke-dasharray和stroke-dashoffset设置到足够大

（具体多大？大于路径长度，可先用js获取路径长度）

js:

window.onload = function(){var path = document.getElementById("path");
    var length = path.getTotalLength();
    console.log(length);
}

css:

path {stroke-dasharray: 1000;
    animation: dash 5s linear ;
}
@keyframes dash {0%   {stroke-dashoffset: 1000;  }100% {stroke-dashoffset: 0;}
}