SVG描边动画原理其实很简单,主要利用以下两个属性
stroke-dasharray 制作虚线,使得黑白相间,
stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取的,下文介绍通过JS获取长度。
动画就是减少虚线偏移,那么实线就会慢慢漏出来了
JS获取长度
var path = document.querySelector(‘path‘);
var length = path.getTotalLength();
然后改变path.style.strokeDasharray 和 path.style.strokeDashoffset为获取的长度即可。
时间: 2024-10-29 19:11:09