SVG技术入门：如何画出一条会动的线

原理

path标签拥有两个属性：stroke-dasharray，stroke-dashoffset。

stroke-dasharray 前一个数值表示dash,后一个数字表示gap长度(只写单个值表示dash/gap尺寸一致),往复循环;

stroke-dashoffset 虚线开始时的偏移长度,正数则从路径起始点向前偏移,负数则向后偏移;

1. 定义 stroke-dasharray 属性,使svg图案的 dash 和 gap 长度大于等于最终图案长度值(记为len);
2. 设置stroke-dashoffset也为最终长度，将其往前偏移len,使dash部分初始隐藏,只显示 gap , gap 又是空白的,所以初始时页面无任何东西;
3. 定义动画,不断改变 stroke-dashoffset 的值直至为0,就出现了动画;

代码

<div class="squiggle-container squiggle-animated">
    <svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">

        <path d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none"></path>

    </svg>
</div>

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// 清除之前的动作
path.style.transition = path.style.WebkitTransition =
  'none';
// 设置起始点
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
path.getBoundingClientRect();
// 定义动作
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';

    <path d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none"></path>

</svg>

参考

• http://www.jianshu.com/p/c7478dc4fd65
• http://www.webhek.com/animated-line-drawing-in-svg/