svg描边动画

今天又学到了个新活，简单学习了一下，顺便来蹭个帖子。

原理

使用stroke-dasharray + stroke-dashoffset

stroke-dasharray ：可控制用来描边的点划线的图案范式

参数：

例：1,5,1,5

实际线段： 1实线，5空白，1实线，5空白

如果数值个数为奇数则会重复一遍形成偶数

例：1,5,6

实际线段： 1实线，5空白，6实线，1空白，5实线，6空白

<svg
  width="200"
  height="200"
  viewPort="0 0 200 300"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
  <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
  <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
  <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
  <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
  <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
  <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
  <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
  <line
    stroke-dasharray="15, 10, 5, 10, 15"
    x1="10"
    y1="170"
    x2="190"
    y2="170" />
  <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />

  <style>
    <![CDATA[
    line{
        stroke: black;
        stroke-width: 2;
    }
    ]]>
  </style>
</svg>

输出如下

stroke-dashoffset：该属性可以对stroke-dasharray开始位置进行偏移

将stroke-dasharray调整为与线段长度相等的一条虚线、在配合stroke-dashoffset对该虚线进行偏移后通过动画将偏移位置还原则就形成了描边动画，如下所示

实践

从网上找一个svg素材。

该svg为矩形拼凑的马里奥，因为图形为矩形，则描边与线不同他会进行一圈描边，所以将描边宽度调整为矩形大小描边只描一条就会形成想要的结果

为了保证各个描边时间同时结束则使用css变量来对动画进行控制

示例：