如何自动执行功能并将描边颜色按百分比更改为svg？

Question

我正在接近 js，但我很难执行以下操作。

我在网页中使用circlifull jquery作为数据计数器，数据从服务器调用ny api并通过修改css发送到页面。我很难将属性笔画更改为类“圆”设置颜色（按文本部分中打印的百分比）。

源代码循环

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
<circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg>
</section>

我在 html 页面中尝试了此测试代码，以将颜色更改为循环进度条，但不起作用。

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

如何更改颜色以及设置分配条件：

红色低于10% 橙色 10% 至 30% 绿色30%+

???

如果有人能帮助我，谢谢。

节容器

<section id="connect-data" stroke="rgb(255, 0, 0)" class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">undefined<circle cx="100" cy="100" r="57" class="border" fill="none" stroke="#ccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle> <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="36, 20000" transform="rotate(-90,100,100)"></circle>undefined<text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px; undefined;" fill="#aaa">10%</text></svg> </section>

我的JS代码

<script>
// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
  if
  document.getElementById("connect-data").setAttribute ("stroke", "rgb(255, 0, 0)");
 });
</script>

Answer 1

我每秒更新进度条，每秒向最大数据20000靠拢1000。在中间，我在它所在的位置写下％。

30%或以上为绿色，10%或以上为橙色，否则为红色。

// Color red     --> rgb(255, 0, 0);
// Color orange  --> rgb(255, 182, 25);
// Color green   --> rgb(0, 128, 0);
$(document).ready(function() {
    let start = 0;
    const end = 20000;

    function progressBar() {
        setTimeout(() => {
            start += 1000;

            document.querySelector(".timer").innerHTML = (100 / (end / start)) + "%"; // percentage
            document.querySelector(".circle").setAttribute("stroke-dasharray", (360 / (end / start)) + ", 360"); // stroke-dasharray

            if (start >= (end * 0.3)) { // +30%
                document.querySelector(".circle").setAttribute("stroke", "rgb(0, 128, 0)"); // green
            }
            else if (start >= (end * 0.1)) { // +10%
                document.querySelector(".circle").setAttribute("stroke", "rgb(255, 182, 25)"); // orange
            }
            else {
                document.querySelector(".circle").setAttribute("stroke", "rgb(255, 0, 0)"); // red
            }

            if (start < end) {
                progressBar();
            }
        }, 1000);
    }
    progressBar();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section id="connect-data" class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
        <circle class="border" cx="100" cy="100" r="57" fill="none" stroke="#cccccc" stroke-width="10" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
        <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#008000" stroke-width="10" stroke-dasharray="0, 360" transform="rotate(-90,100,100)"></circle>
        <text class="timer" text-anchor="middle" x="100" y="110" style="font-size: 22px;" fill="#aaa">0%</text>
    </svg>
</section>

我希望这有帮助！