背景:在网上看到别人的svg图片在显示的时候是画出来的线型图，感觉很不错。研究了一下，写出下面demo,可以直接拿来运行
动画效果貌似只能在svg中的path标签有效，关键的实现就是下面两个属性的使用和css3中的animation的控制
svg基础点
stroke-dasharray: 用来描边的点划线的图案范式,数值越大，虚线越宽
stroke-dashoffset：属性指定了dash模式到路径开始的距离。
1 控制虚线的宽度，如果初始化为空白，则就让stroke-dashoffset和stroke-dasharray等于要绘制的path总长度，如何计算path总长度呢？
var path = document.querySelector('.path');
var length = path.getTotalLength(); //这个数值就是了
2 animation动画属性，定义一个使stroke-dashoffset为0，并定义动画的生命周期时间即可，具体看下面demo代码。
下面就是demo内容
注意：必须要SVG的path中才能实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path class="path1" d="m175.5,240c0,0 2.439667,-3.436249 8,-10c6.398788,-7.553513 20.439194,-14.8246 30,-28c7.096558,-9.77951 9.279068,-24.191116 12,-33c1.58931,-5.145294 1.337494,-7.310013 3,-10c0.7435,-1.203003 2.279327,-3.57196 4,-5c5.602112,-4.649338 15,-3 24,-3c14,0 28.062592,-0.220062 46,5c23.084015,6.717804 45.199768,14.611099 63,24c18.212982,9.606613 23.211639,10.854065 27,20c1.148041,2.771637 1.877441,9.468704 -1,17c-5.643127,14.770081 -20.075073,24.883392 -31,32c-9.063324,5.903931 -20.465912,10.179443 -28,15c-5.393585,3.450989 -6,5 -6,6c0,2 1.055695,4.392212 -2,11c-3.026733,6.545135 -6.729614,12.228851 -11,17c-1.886353,2.107544 -4.748505,5.465851 -10,8c-7.694916,3.713226 -13.866943,6.544189 -21,8c-7.899414,1.612213 -22,1 -40,1c-15,0 -22.174179,0.749207 -28,-1c-9.432846,-2.832214 -13.829712,-5.282654 -17,-7c-6.696396,-3.627441 -15.260895,-3.975128 -25,-7c-7.273041,-2.258942 -12.347183,-3.288666 -17,-6c-5.532333,-3.223846 -8.328217,-11.842529 -13,-22c-8.614334,-18.729477 -11.859543,-28.016724 -13,-37c-0.890549,-7.014771 -2,-15 -2,-24c0,-8 -1.104729,-15.506592 3,-23c2.402115,-4.385193 5.289383,-10.411499 9,-16c5.099762,-7.680649 9,-12 13,-16c3,-3 6,-4 8,-5c2,-1 4,-2 5,-2c1,0 1.763138,2.34346 4,8c2.651794,6.705811 5.768585,12.6129 8,18c1.57785,3.80925 3,8 3,11c0,6 -1.148758,8.133759 0,13c0.513748,2.176254 1,4 1,5c0,2 0,4 0,6c0,1 0,2 0,4c0,2 -1,3 -1,4c0,1 0,2 0,3c0,1 0,2 0,3c0,1 0,2 0,4c0,1 -1,3 -1,4l0,1l0,1l0,1" id="svg_15" stroke-width="1.5" stroke="#000" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 2</title>
<path class="path2" d="m316.5,242c0,0 -0.151581,-3.045105 2,-10c2.803772,-9.063049 4.33197,-15.229355 6,-19c1.458649,-3.297333 3,-6 4,-7c1,-1 0.705475,-2.346191 3,-4c1.813995,-1.307449 3.147278,-2.173096 2,-3c-3.627991,-2.614899 -8.789154,-2.896805 -24,-6c-13.85672,-2.826935 -22,-2 -28,-2c-4,0 -6.418854,-0.581146 -8,1c-1.581146,1.581146 -3.563507,5.702499 -6,11c-2.642761,5.745941 -4.798615,13.044525 -6,18c-1.715271,7.07515 -4.486267,12.823746 -5,15c-0.919006,3.89299 0,8 0,10c0,1 0,2 0,5c0,3 -3,7 -6,10c-4,4 -7.053497,6.540497 -9,7c-2.176254,0.513733 -3,1 -7,1c-4,0 -8,0 -12,0c-3,0 -7.802429,-0.432892 -14,-3c-5.843124,-2.420288 -6.693436,-3.541199 -8,-3c-0.923874,0.38269 -0.707108,2.292908 0,3c0.707108,0.707092 2.794876,-0.220215 6,-3c3.777267,-3.276001 8.531647,-7.517029 14,-12c2.78833,-2.285873 5.877655,-5.06601 7,-7c1.809723,-3.118484 2.520157,-4.323669 4,-6c2.386169,-2.703003 5.190277,-3.881516 7,-7c2.24469,-3.867996 5,-8 8,-12c3,-4 5,-7 7,-10c2,-3 4.173096,-6.852737 5,-8c1.307465,-1.813995 2,-4 3,-6c1,-2 2.346191,-2.70546 4,-5c1.307465,-1.813995 2.458801,-1.693436 3,-3c0.38269,-0.923874 1.934143,-2.144287 4,-3c2.92157,-1.210144 4,-2 5,-2c2,0 3.041321,0.152771 7,-1c3.036163,-0.88414 9,-1 16,-1c9,0 15.106995,0.080994 19,1c2.176239,0.513748 4.042908,0.71022 5,1c3.450836,1.04483 5.906342,3.103409 7,4c2.78833,2.285873 6.769501,4.390991 9,8c3.325012,5.37999 2.583893,8.028992 3,11c1.009766,7.209747 3,10 3,12c0,3 0,5 0,7c0,3 -1,5 -2,6c-3,3 -5,4 -8,5c-3,1 -8,2 -10,2c-1,0 -2.186005,0.692551 -4,2c-1.147278,0.826904 -2,2 -3,2c-1,0 -2,0 -3,0c-1,0 -3,0 -5,0l-1,0" id="svg_16" stroke-width="1.5" stroke="#000" fill="none"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<text stroke="#000" class="path3" transform="matrix(2.1535985469818115,0,0,4.55555534362793,-228.9893115758896,-709.1110688447952) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="201.900914" x="170.175315" stroke-width="0" fill="#bf4c4c">HIKVISION</text>
</g>
</svg>
</body>
<style>
/* 如何获取stroke的长度
var path = document.querySelector('.path');
var length = path.getTotalLength();
*/
.path1 {
stroke-dasharray: 100;
animation: dash 5s linear ;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
.path2{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 5s linear forwards;
}
@keyframes dash2 {
to {
stroke-dashoffset: 0;
}
}
.path3{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash3 5s linear forwards;
}
@keyframes dash3 {
to {
stroke-dashoffset: 0;
}
}
</style>
</html>