使用javascript根据数据属性更改stroke-dashoffset

Question

我有 3 个带有 svg 的圆圈我正在尝试根据数据属性 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>