SVG中的stroke-dasharray和stroke-dashoffset属性

如果要实现如下的一个效果，该如何实现？

首先可以想到使用svg的path绘制一段这样的路径，然后接下来的事情就交给stroke-dasharray和stroke-dashoffset来完成吧。

首先介绍一下stroke-dasharray和stroke-dashoffset这两个属性。

stroke-dasharray介绍

MDN解释

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

这个属性可以传递两个值，第一个值表示实线的长度，第二个值表示虚线的长度。

举一个例子来了解这段话的含义。

<svg>
    <path d="M10,10 L50,10" stroke-width="1" stroke="#f00" fill="none"></path>
</svg>

展示的效果为一段直线。

如果为path添加上stroke-dasharray="10,10"属性后，将会变成这个样子。

看起来变成一条虚线。所以stroke-dasharray="10, 10"的含义是path路径变成实线（可见线段）和虚线（不可见线段）都是10像素的长度的效果。

可以看到，这个路径的长度是40像素，那么设置为stroke-dasharray="40, 10"，此时将看不到虚线，是因为实线部分已经占据的路径的最大长度，虚线就显示不出来了。

stroke-dashoffset介绍

stroke-dashoffset 属性指定了dash模式到路径开始的距离。

就是说，stroke-dashoffset设置路径起始实线段的偏移量，正数表示起始点向前偏移，负数向后偏移。

以上述代码为例，为其添加stroke-dashoffset="20"属性。

<svg>
    <path
    d="M10,10 L50,10"
    stroke-width="1"
    stroke="#f00"
    fill="none"
    stroke-dasharray="40, 10"
    stroke-dashoffset="20"
    ></path>
</svg>

由于path路径本来的长度为40，并且设置了stroke-dasharray="40, 10"，本应该只显示一个直线段的，但是由于设置了stroke-dashoffset="20"，路径起始点向左偏移20像素，后面的虚线就显示了出来，为10像素，同时紧跟着虚线后面的是直线，由于只剩下10像素的空间，所以也显示为10像素，此时就展示为上图所示的样子。

利用这两个属性的特性，我们可以来实现文章一开始所描述的复杂路径的动画效果。

<style>
    .path {
      stroke: #8405d3;
      stroke-width: 2;
      stroke-dasharray: 350;
      stroke-dashoffset: 350;
      fill: none;
      animation: move 4s ease-in-out forwards;
    }
    @keyframes go {
      0% {
        stroke-dashoffset: 350;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
</style>
<svg>
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>

由于路径的长度有可能是不确定的，所以，可以使用js动态获取路径的长度为其添加动画效果。

const el = document.querySelector('.path')
const width = el.getTotalLength()

通过使用stroke-dasharray和stroke-dashoffset这两个属性，可以制作出许多html普通元素难以实现的路径动画效果，是故，合理地利用不同的元素的特性，就能实现出更加炫酷的效果😀。