在javascript中设置svg进度条百分比

Question

我观看了一个YouTube教程，并设法制作了一个圆形进度条。附件是我的代码。我面临的问题是，我不知道如何根据计算结果使用JavaScript动态设置进度条百分比。例如，我想要进度条去25%，如果计算的答案是25%，这是百分比变量。

var percent = revenue/investment;
document.getElementById("circ").style.strokeDashoffset = percent;

.box .percent svg  circle:nth-child(1)
{
stroke-dashoffset:0;
stroke:#f3f3f3;
}
.box .percent svg  circle:nth-child(2)
{
stroke-dashoffset:calc(440 - (440*10) / 100);
stroke:#03a9f4 !important;
}

<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle id="circ" cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2 id="percent"></h2><span>%</span>
</div>
</div>
</div>

Answer 1

这是纯SVG(只有SVG属性)版本。pathLength为100，因此dasharray中的第一个值是介于0到100之间的数字。起点"在我旋转圆圈后，路径在12点钟方向

let c1 = document.getElementById('c1');
let t1 = document.getElementById('t1');
document.forms.form01.range.addEventListener('change', e => {
let value = parseInt(e.target.value);
c1.setAttribute('stroke-dasharray', `${value} 100`);
t1.textContent = `${value}%`;
});

<form name="form01">
<input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
<circle id="c1" cx="25" cy="25" r="24" stroke-width="2"
stroke="darkorange" fill="none" transform="rotate(-90 25 25)"
stroke-dasharray="50 100" pathLength="100" />
<text id="t1" x="25" y="25" dominant-baseline="middle"
text-anchor="middle" font-size="10">50%</text>
</svg>

还有一个更CSS的例子:

let c1 = document.getElementById('c1');
let t1 = document.getElementById('t1');
document.forms.form01.range.addEventListener('change', e => {
let value = parseInt(e.target.value);
c1.style.strokeDasharray = `${value} 100`;
t1.textContent = `${value}%`;
});

circle#c1 {
stroke-width: 2;
stroke: darkorange;
fill: none;
stroke-dasharray: 50 100;
}
text#t1 {
dominant-baseline: middle;
text-anchor: middle;
font-size: 10px;
}

<form name="form01">
<input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
<circle id="c1" cx="25" cy="25" r="24"
transform="rotate(-90 25 25)" pathLength="100" />
<text id="t1" x="25" y="25">50%</text>
</svg>