纯CSS实现SVG路径描边动画效果

SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性：

1）stroke：线的颜色；

2）stroke-width：线的宽度；

3）stroke-linecap：线的端点，可用值有butt、round、square、inherit；

4）stroke-dasharray：虚线描边，可用值为none、<dasharray>（一个逗号或空格分隔的数值列表）、inherit。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承；

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

6）stroke-opacity：线的透明度。

此次主要介绍stroke-dasharray和dash-offset两个属性。

Html：

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<line id="line" x1='0' y1='40' x2='70' y2='40'>
</svg>

Css：

#line{
stroke: black;
stroke-dasharray: 100;
stroke-dashoffset: 0;
}

此时能看到一条完整的线：



若将stroke-offset设置为99，则整条线向左平移99个像素，



此时只能看到左右一个像素点，右边则为虚线部分，若将dash-offset设置为100，则只能看到虚线的部分
4000
，实线部分完全左移被遮挡。

此时，如果设置animation改变dash-offset的值就能实现黑色的实现向右平移的效果，达到动态描线的效果。

Css：

#line{
stroke: black;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: dash 1s all ease;
}

@keyframes dash{
to{
stroke-dashoffset: 0;
}
}

如果想知道路径或者线条的长度，可以借助以下代码：

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