3.svg 描边动画

svg描边动画是根据stroke-dasharray或者stroke-dashoffset变化来实现的：
如果我们画一个矩形：

<rect x="10" y="10" width="100" height="50" fill="none" stroke="red"/>

image.png
stroke-dasharray,一个或两个甚至多个参数，一个参数代表虚线和间隙宽度，两个以及多个参数时分别代表一个虚线一个间隙如此重复

    <rect x="10" y="10" width="100" height="50" fill="none" stroke="red" stroke-dasharray="5"/>
    <rect x="10" y="70" width="100" height="50" fill="none" stroke="red" stroke-dasharray="10,10"/>
    <rect x="10" y="130" width="100" height="50" fill="none" stroke="red" stroke-dasharray="10,5,5,15"/>

image.png
可以css操作stroke-dasharray属性的值来做动画效果：

    css:
        .ani{
          animation: aniMove 1s ease both;
        }
        @keyframes aniMove {
          0%{
            stroke-dasharray:0,10
          }
          100%{
            stroke-dasharray:10,10
          }
        }

  <rect class="ani" x="10" y="70" width="100" height="50" fill="none" stroke="red" />

GIF.gif

同样道理操作path路径描边就可以实现svg图片的描边效果：

GIF.gif

在进行路径描边动画之前我们需要获取到动画路径的长度,然后根据长度进行css操作：

    let obj = document.querySelectorAll("path");
    obj.forEach((item)=>{
      console.log(item.getTotalLength())
    })

  css:
    .cls-2{
      animation: lineMove 3s ease-out;
    }
    @keyframes lineMove {
      0%{
        stroke-dasharray: 0, 70.71565246582031;
      }
      100%{
        stroke-dasharray: 70.71565246582031, 70.71565246582031;
      }
    }

如何将png图片转为svg矢量图（带path路径）呢？

可以利用AI软件转换：

image.png
利用AI软件打开png图片，点击图像描摹下拉框选择高保真度图片，然后导出为SVG格式即可：
image.png
点击显示代码就可以看到具体代码了，选择确定也是一样的。注意红框内最好修改为英文，这里我的path路径都是填充了，后边为了做描边效果修改为了stroke。
image.png

---

over