使用javascript修改基于data属性的stroke-dashoffset

Question

我有一个svg的3个圆圈，我试图改变基于数据属性data-num的stroke-dashoffset，以具有与data-num的值相匹配的不同大小的圆圈

我正在尝试下面的代码，但stroke-dashoffset的值没有改变

如何改变stoke-dashoffset的值，使其具有data-num的值，并保持圆圈的动画?

const numbers = document.querySelectorAll('.number');
const svgEl = document.querySelectorAll('svg circle');
const counters = Array(numbers.length);
const intervals = Array(counters.length);
counters.fill(0);
numbers.forEach((number, index) => {
intervals[index] = setInterval(() => {
if(counters[index] === parseInt(number.dataset.num)){
clearInterval(counters[index]);
}else{
counters[index] += 1;
number.innerHTML = counters[index] + "%";
svgEl[index].style.strokeDashoffset = 472 - 472 * parseInt(number.dataset.num / 100);
}
}, 20)
})

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
}
.skill-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.skill-container .skill {
position: relative;
margin-right: 40px;
}
.skill-container .skill .outer {
height: 160px;
width: 160px;
border-radius: 50%;
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0 0 0 /.15), -6px -6px 10px -1px rgba(255 255 255 / .7);
}
.skill-container .skill .outer .inner {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
width: 120px;
border-radius: 50%;
box-shadow: inset 4px 4px 6px -1px rgba(0 0 0/ .2),
inset -4px -4px 6px -1px rgba(255 255 255 /.7),
-.5px -.5px 0px rgba(255 255 255 / 1),
.5px .5px 0px rgba(0 0 0 /.15),
0px 12px 10px -10px rgba(0 0 0 / 0.05);
}
.skill-container .skill .outer .inner .number {
font-weight: 800;
}
.skill-container .skill:nth-child(1) .outer .inner .number {
color: #f75023;
}
.skill-container .skill:nth-child(2) .outer .inner .number {
color: #4fa0ff;
}
.skill-container .skill:nth-child(3) .outer .inner .number {
color: #7811f7;
}
circle {
fill: none;
stroke: #f75023;
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset:472;
animation: anim linear 2s forwards;
}
@keyframes anim {
100% {
stroke-dashoffset: 70;
}
}
svg {
position: absolute;
top: 0;
left: 0;
}
.skill-container .skill:nth-child(1) circle {
stroke: #f75023;
}
.skill-container .skill:nth-child(2) circle {
stroke: #4fa0ff;
}
.skill-container .skill:nth-child(3) circle {
stroke: #7811f7;
}

<div class="skill-container">
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="90">
90%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="50">
80%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="70">
85%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
</div>

Answer 1

我将第二个472改为440

和

我使用了parseFlot而不是Int，问题解决了

const numbers = document.querySelectorAll('.number');
const svgEl = document.querySelectorAll('svg circle');
const counters = Array(numbers.length);
const intervals = Array(counters.length);
counters.fill(0);
numbers.forEach((number, index) => {
intervals[index] = setInterval(() => {
if(counters[index] === parseInt(number.dataset.num)){
clearInterval(counters[index]);
}else{
counters[index] += 1;
number.innerHTML = counters[index] + "%";
svgEl[index].style.strokeDashoffset = Math.floor(472 - 440 * parseFloat(number.dataset.num / 100));
}
}, 20);
})

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
}
.skill-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.skill-container .skill {
position: relative;
margin-right: 40px;
}
.skill-container .skill .outer {
height: 160px;
width: 160px;
border-radius: 50%;
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0 0 0 /.15), -6px -6px 10px -1px rgba(255 255 255 / .7);
}
.skill-container .skill .outer .inner {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
width: 120px;
border-radius: 50%;
box-shadow: inset 4px 4px 6px -1px rgba(0 0 0/ .2),
inset -4px -4px 6px -1px rgba(255 255 255 /.7),
-.5px -.5px 0px rgba(255 255 255 / 1),
.5px .5px 0px rgba(0 0 0 /.15),
0px 12px 10px -10px rgba(0 0 0 / 0.05);
}
.skill-container .skill .outer .inner .number {
font-weight: 800;
}
.skill-container .skill:nth-child(1) .outer .inner .number {
color: #f75023;
}
.skill-container .skill:nth-child(2) .outer .inner .number {
color: #4fa0ff;
}
.skill-container .skill:nth-child(3) .outer .inner .number {
color: #7811f7;
}
circle {
fill: none;
stroke: #f75023;
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset:472;
transition: 2s linear;
}
svg {
position: absolute;
top: 0;
left: 0;
}
.skill-container .skill:nth-child(1) circle {
stroke: #f75023;
}
.skill-container .skill:nth-child(2) circle {
stroke: #4fa0ff;
}
.skill-container .skill:nth-child(3) circle {
stroke: #7811f7;
}

<div class="skill-container">
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="90">
90%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="50">
80%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
<div class="skill">
<div class="outer">
<div class="inner">
<div class="number" data-num="70">
85%
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
</div>