动态设置关键帧 stroke-dashoffset

Question

您好我正在尝试创建一个圆形百分比条，它适用于硬设置值但是它需要动态设置，我假设我可以在我的脚本中设置样式属性但我不确定如何访问它。

百分比圈的html：

  <div class="percentBox">
            <div class="OuterCircle">
                    <div class="InnerCircle">
                            <div id="number">
                            </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>

这是我的关键帧样式：

@keyframes anim{
100%{
    stroke-dashoffset: 0;
}}

CSS类样式：

.OuterCircle {
width: 120px;
height:120px;
border-radius:50%;
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
           -6px -6px 10px -1px rgba(255,255,255,0.7);}


.InnerCircle {
width: 120px;
height: 120px;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
               -4px -4px 6px -1px rgba(255,255,255,0.7),
               -0.5px -0.5px 0px rgba(255,255,255,1),
               0.5px 0.5px 0px rgba(0,0,0,0.15),
               0px 12px 10px -10px rgba(0,0,0,0.05);}

circle{
fill:none;
stroke: url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;
animation: anim 2s linear forwards;}

这是我的脚本：

<script>
    let number = document.getElementById("number");
    let counter = 0;
    val keyframe =document.getElementById("keyframes");
    keyframe.setStroke-offset(VARIABLE)
    setInterval(() => {
            if(counter == VARIABLE){
                    clearInterval
            } else {
            counter += 1;
            number.innerHTML = counter + "%"
            }
    }, 20)

Answer 1

问题更新后：

您无法在 JavaScript 中访问关键帧，但根据更新的 HTML 和 CSS，我们可以通过以下方式获得您的功能：

我也更新了一些样式（定位）

 let number = document.getElementById("number"); let circle = document.getElementById("circle"); let counter = 0; let maxCounter = 100; const totalOffset = 472; let currentOffset = totalOffset const strokeDashoffsetSteps = totalOffset / maxCounter; let interval = setInterval(() => { // update counter counter += 1; // update currentOffset currentOffset -= strokeDashoffsetSteps if(counter === maxCounter){ clearInterval(interval); } // update text number.innerHTML = counter + "%"; // update dashOffset circle.style.strokeDashoffset = currentOffset; }, 20);

 .percentBox { position: relative; } svg { position: absolute; top: 0; left: 0; } .OuterCircle { width: 120px; height: 120px; border-radius: 50%; padding: 20px; box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7); } .InnerCircle { width: 120px; height: 120px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05); } circle { fill: none; stroke: url(#GradientColor); stroke-width: 20px; stroke-dasharray: 472; stroke-dashoffset: 472; animation: anim 2s linear forwards; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Circle Progress Bar</title> </head> <body> <div class="percentBox"> <div class="OuterCircle"> <div class="InnerCircle"> <div id="number"> </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 id="circle" cx="80" cy="80" r="70" stroke-linecap="round" /> </svg> </div> </body> </html>

问题更新前：

您不能在 JavaScript 中访问关键帧，但可以读取 CSS 文件并解析关键帧以获取 JS 中的实际数据，或者您可以编写整个逻辑 JS，我想这很容易。

您可以使用element.style.strokeDashoffset轻松访问 strokeDashoffset。 请执行以下示例。

 const progress = document.querySelector('.progress'); console.log(progress.style.strokeDashoffset); let offset = 0; let interval = setInterval(() => { if (offset === 300) { clearInterval(interval); } progress.style.strokeDashoffset = offset++; }, 10);

 .progress { padding: 10px; stroke: grey; stroke-width: 15px; stroke-dasharray: 10; }

 <svg class="svg"> <path class="progress" d="m10,10 h300" /> </svg>

动态设置关键帧 stroke-dashoffset

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-07-06 09:29:27

问题更新后：

问题更新前：

动态设置关键帧 stroke-dashoffset

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-07-06 09:29:27

问题更新后：

问题更新前：

解决方案1
2 已采纳 2022-07-06 09:29:27