SVG（可缩放矢量图形）虚线相关属性与线条动画原理：一条会动的线

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

SVG可以实现非常酷炫的线条动画

甚至是这样的网页 传送门

---

我们可以先来实现一个简单的SVG线条动画
像这样

不要着急，在此之前我们需要先了解一些属性值
#虚线属性
虚线属性包括两个stroke-dasharray与stroke-dashoffset
##stroke-dasharray
大家来看下面的例子

 <svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20