用css实现svg描边的动画效果

一、关于svg的动画描边效果

像是有人一点一点绘制一样的动画效果。

二、基础知识

1、stroke

定义一条线、文本、或元素轮廓颜色

2、stroke-width

定义一条线、文本或元素轮廓的厚度

3、stroke-linecap

描边端点表现形式

<svg>
  <g fill='none' stroke='black' stroke-width='10'>
    <path stroke-linecap='butt' d='M5 20 l215 0' />
    <path stroke-linecap='round' d='M5 40 l215 0' stroke='red'/>
    <path stroke-linecap='square' d='M5 60 l215 0' />
  g>
svg>

4、stroke-dasharray

用于创建虚线

stroke-dasharray = '10'
stroke-dasharray = '10, 10'
stroke-dasharray = '10, 10, 5, 5'

绘制虚线：
一个参数时：表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度一个表示间距

5、stroke-dashoffset

定义一条线，文本或元素距离（相当于基于position:relative; 设置left值。只是不像left单纯的基于x方向设置，stroke-dashoffset是基于svg路径设置的）
正值向左移动，负值向右移动
stroke-dasharray和stroke-dashoffset相结合可以做出很炫酷的效果
举个栗子：按钮鼠标滑过动效（鼠标滑过按钮，边框自身旋转一周）

 #shape {
      stroke-width: 6px;
      fill: transparent;
      stroke: #009FFD;
      stroke-dasharray: 85 400;
      stroke-dashoffset: -220;
      transition: 1s all ease
    }
    svg:hover #shape {
      stroke-dasharray: 70 0;
      stroke-width: 3px;
      stroke-dashoffset: 0;
      stroke: #06D6A0
    }

   width="150">
    "shape" height="40" width="150" />
  

tips：如果不理解动效的变化过程可以把transition中的时间改大一些，动效变慢些就可以清楚边框的变化过程

6、stroke-linejoin

描边转角的表现方式

stroke-linejoin = miter
stroke-linejoin = round
stroke-linejoin = bevel

7、stroke-opacity

描边透明度

三、路径的长度

在做动画效果的时候需要给stroke-dasharray和stroke-dashoffset设置路径的长度，要想获取路径的准确长度，可以借助下面的JavaScript代码：

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

四、写一个稍复杂的栗子

先画一个闪电

<svg width="580" height="400">
    <path d="m262.59622,90.56177l34.74561,60.80042l-14.32703,7.17541l43.75135,52.09264l-14.32061,8.69967l54.08581,87.23186l-91.73919,-66.84884l17.49797,-9.28344l-57,-42.81731l20.425,-13.23194l-60.18379,-44.91723l67.06487,-38.90124z">
svg>

path {
    stroke: #000;
    fill: transparent;
    stroke-width: 1.5px;
}
@keyframes act {
    100% {
        stroke-dashoffset: 0;
    }
}

用js获取路径长度
然后添加样式

var char = 'http://www.w3.org/2000/svg',
    path = document.getElementsByTagNameNS(char, 'path')[0],
    len = path.getTotalLength();

path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
path.style.animation = 'act 2s linear forwards';

参考网址
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/
http://blog.csdn.net/ning0_o/article/details/54970474
http://blog.csdn.net/q1056843325/article/details/54564332

THE END