前端提高篇(七十一)：SVG基本知识（二）路径属性、渐变、滤镜、viewBox，与canvas的对比

path {

stroke: #000;

fill: transparent;

stroke-width: 3px;

stroke-dasharray: 30px 40px;

}

效果：画了一条虚线，画30px，空40px，画30px…

如果写的是：

stroke-dasharray: 20px 30px 40px;

效果是：画20px，空30px，画40px，空20px…循环下去

stroke-dashoffset：线前面npx的位置被盖住了，后面的像素替补上来，就像抽了一条无限长的绳子，没有尽头

下图是dashoffset从0到30px的过程，虚线设置是stroke-dasharray: 30px 40px;：

到了第30px，原本30px的画线完全消失了，展示的是以40px的空白开始的虚线

做一个动画小demo，设置dasharray为300px，用计时器控制dashoffset的值，实现一条线左挪至消失

var move = document.getElementById(‘move’);

var storke_num = 0;

var timer = setInterval(function(){

storke_num +=10;

if (storke_num < 300){

move.style.strokeDashoffset = storke_num + ‘px’;

}else{

clearInterval(timer);

move.style.strokeDashoffset = ‘300px’;

}

}, 100)

path {

stroke: #000;

fill: transparent;