svg描边动画的实现

        想要完成svg描边的动画效果，首先我们要熟悉两个两个属性，stroke-dasharray和stroke-dashoffset。

stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇书个值，则这个值的数列重复一次，从而变成偶数个值。因此，1,2,3等同于1,2,3,1,2,3。

• 当stroke-dasharray值为10 10的时候

10           10                    10                10                ...
线长度     缺口长度        线长度        缺口长度        ...

• 当 stroke-dasharray值为10 20的时候

10                20                10                20                ...
线长度        缺口长度        线长度        缺口长度        ...

 

•  当stroke-dasharray值为5 10 15的时候

5                10                    15               5                    10                

线长度        缺口长度        线长度        缺口长度        线长度        ... 

 

 stroke-dashoffset：定义了stroke-dasharray向左偏移的量

 了解了这两个属性后，我们就可以开始描边动画了

1、在iconfont上面复制一个你喜欢的svg图标代码

<svg t="1661241677738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2273" width="200" height="200">
    <path id="logo" d="M973.845333 519.253333c0-71.765333-47.104-132.970667-111.893333-154.474667C848.426667 184.618667 697.024 43.818667 516.074667 43.818667c-180.970667 0-330.730667 139.157333-345.450667 318.442667-69.162667 18.773333-120.469333 82.112-120.469333 156.992 0 89.536 73.258667 162.816 162.816 162.816l68.906667 0L281.877333 356.437333l-67.818667 0c17.237333-152.682667 146.432-269.952 301.994667-269.952 154.922667 0 284.885333 117.76 302.016 270.314667-2.368-0.106667-4.693333-0.362667-7.061333-0.362667l-68.906667 0 0 325.610667 68.906667 0c1.749333 0 3.456-0.213333 5.205333-0.256-23.637333 145.088-151.104 255.722667-300.16 255.722667-11.776 0-21.333333 9.536-21.333333 21.333333s9.557333 21.333333 21.333333 21.333333c174.762667 0 323.413333-133.418667 344.128-305.792C925.888 653.397333 973.845333 591.68 973.845333 519.253333zM239.232 639.402667l-26.24 0c-66.24 0-120.149333-53.888-120.149333-120.149333s53.888-120.149333 120.149333-120.149333l26.24 0L239.232 639.402667zM811.029333 639.402667l-26.24 0L784.789333 399.104l26.24 0c66.24 0 120.149333 53.888 120.149333 120.149333C931.178667 585.493333 877.269333 639.402667 811.029333 639.402667z" p-id="2274"></path>
  </svg>

2、获取path长度

const path = document.getElementById('logo')
const pathLen = path.getTotalLength() 
console.log(pathLen); // 6076.2451171875

 3、设置动画

.icon {
  fill: none;
  stroke: chocolate;
  stroke-width: 2;
  animation: logo 5s linear infinite forwards;
}

@keyframes logo {
  0% {
    stroke-dasharray: 6076;
    stroke-dashoffset: 6076;
  }
  100% {
    stroke-dasharray: 6076;
    stroke-dashoffset: 0;
  }
}

效果

源代码

<template>
  <svg t="1661241677738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2273" width="200" height="200">
    <path id="logo" d="M973.845333 519.253333c0-71.765333-47.104-132.970667-111.893333-154.474667C848.426667 184.618667 697.024 43.818667 516.074667 43.818667c-180.970667 0-330.730667 139.157333-345.450667 318.442667-69.162667 18.773333-120.469333 82.112-120.469333 156.992 0 89.536 73.258667 162.816 162.816 162.816l68.906667 0L281.877333 356.437333l-67.818667 0c17.237333-152.682667 146.432-269.952 301.994667-269.952 154.922667 0 284.885333 117.76 302.016 270.314667-2.368-0.106667-4.693333-0.362667-7.061333-0.362667l-68.906667 0 0 325.610667 68.906667 0c1.749333 0 3.456-0.213333 5.205333-0.256-23.637333 145.088-151.104 255.722667-300.16 255.722667-11.776 0-21.333333 9.536-21.333333 21.333333s9.557333 21.333333 21.333333 21.333333c174.762667 0 323.413333-133.418667 344.128-305.792C925.888 653.397333 973.845333 591.68 973.845333 519.253333zM239.232 639.402667l-26.24 0c-66.24 0-120.149333-53.888-120.149333-120.149333s53.888-120.149333 120.149333-120.149333l26.24 0L239.232 639.402667zM811.029333 639.402667l-26.24 0L784.789333 399.104l26.24 0c66.24 0 120.149333 53.888 120.149333 120.149333C931.178667 585.493333 877.269333 639.402667 811.029333 639.402667z" p-id="2274"></path>
  </svg>
</template>

<script>

export default {
  name: 'HomeView',
  mounted() {
    const path = document.getElementById('logo')
    const pathLen = path.getTotalLength() 
    console.log(pathLen); // 6076.2451171875
  }
}
</script>

<style>
.icon {
  fill: none;
  stroke: chocolate;
  stroke-width: 2;
  animation: logo 5s linear infinite forwards;
}

@keyframes logo {
  0% {
    stroke-dasharray: 6076;
    stroke-dashoffset: 6076;
  }
  100% {
    stroke-dasharray: 6076;
    stroke-dashoffset: 0;
  }
}
</style>