想要完成svg描边的动画效果，首先我们要熟悉两个两个属性，stroke-dasharray和stroke-dashoffset。
stroke-dasharray：它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇书个值，则这个值的数列重复一次，从而变成偶数个值。因此，1,2,3等同于1,2,3,1,2,3。
10 20 10 20 ...
线长度 缺口长度 线长度 缺口长度 ...
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.24511718753、设置动画
.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>