给线条类型的svg图标加上绘制的动画效果

效果展示

步骤分解

1 确认svg文件有路径数据
2 获取path的长度
3 定义绘制线条的长度
4 定义关键帧动画
5 应用关键帧动画

实操

1 确认svg文件有路径数据
path标签里面的d属性，就是路径数据

<template>
  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" height="300" viewBox="0 0 260 300">
    <path
      ref="pathRef"
      class="path"
      stroke="#000"
      stroke-width="5"
      stroke-linecap="round"
      d="..."
    />
  </svg>
</template>

2 获取path的长度
调用SVGPathElement上的getTotalLength方法，获取线条的长度

<template>
  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" height="300" viewBox="0 0 260 300">
    <path
      ref="pathRef"
      class="path"
      stroke="#000"
      stroke-width="5"
      stroke-linecap="round"
      d="..."
      />
  </svg>
</template>

<script setup lang='ts'>
  import { onMounted, ref } from 'vue';
  const pathRef = ref<SVGPathElement | null>(null);

  onMounted(() => {
    const value = pathRef.value?.getTotalLength()
    console.log(value)
    // 842.6114501953125
  })
</script>

3 定义绘制线条的长度
把从getTotalLength获取的线条长度赋值给线条

<template>
  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" height="300" viewBox="0 0 260 300">
    <path
      ref="pathRef"
      class="path"
      stroke="#000"
      stroke-width="5"
      stroke-linecap="round"
      d="..."
      />
  </svg>
</template>

<style lang='less' scoped>
  .path {
    stroke-dasharray: 843px;
  }
</style>

4 定义关键帧动画
分别设置起始帧状态和结束帧状态

@keyframes drawLine {
  from {
    /* 起始帧给线条加上等于自身长度的偏移，使线条不可见 */
    stroke-dashoffset: 842px;
  }
  to {
    /* 结束帧让偏移值为0，使得线条完整可见 */
    stroke-dashoffset: 0px;
  }
}

5 应用关键帧动画
将定义的keyframes赋值给animation

<template>
  <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="260" height="300" viewBox="0 0 260 300">
    <path
      ref="pathRef"
      class="path"
      stroke="#000"
      stroke-width="5"
      stroke-linecap="round"
      d="..."
    />
  </svg>
</template>

<style lang='less' scoped>
@keyframes drawLine {
  from {
    stroke-dashoffset: 843px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}

.path {
  stroke-dasharray: 843px;
  /* 应用关键帧动画 */
  animation: drawLine 3s ease-out;
  /* 动画结束时，将元素保留在最后一帧的状态，也就是线条可见的状态 */
  animation-fill-mode: forwards;
}
</style>

关于兼容性

测试下来发现用animation来操作stroke-dashoffset的兼容性不佳，最后换成transition了，兼容性要好很多。

.path {
  stroke-dasharray: 843px;
  stroke-dashoffset: 843px;
  transition: stroke-dashoffset 3s ease-in-out
}

.draw {
  stroke-dashoffset: 0;
}