动态径向进度条 [英] Dynamic Radial progress bar
问题描述
我正在为一项筹款活动设计一个放射状进度表,并希望根据百分比跟踪捐赠情况.
I'm working on a radial progress meter for a fundraiser and would like to keep track of the donations based on percentages.
除了笔触填充已关闭,我一切正常.示例:我将数据百分比设置为75,它呈现了大约55%的比例.(填充笔划开始显示为 data-percent ="38"
)
I have everything working except the stroke fill is off.
Example: I set the data-percentage to 75 and it renders around 55%. (The fill stroke starts to show at data-percent="38"
)
我需要从0%-100%
有人可以帮我解决计算错误吗?
Could someone help me fix the calculation error?
HTML:
<div class="flex justify-center mt-10">
<div class="w-1/2">
<div class="svgbox">
<div class="progressdiv" data-percent="38">
<svg class="progress" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="transparent" stroke-dasharray="502.4" stroke-dashoffset="0" ></circle>
<circle class="bar" cx="50" cy="50" r="50" fill="transparent" stroke-dasharray="502.4" stroke-dashoffset="0"></circle>
</svg>
<img src="https://www.okayplayer.com/wp-content/uploads/2015/07/Barack-Obama-House-Music-Square.jpg" class="rounded-full absolute left-0 top-0" style="width: 92%;left: 50%; top:50%; transform: translate(-50% , -50%);">
</div>
</div>
</div>
</div>
CSS:
body {
background-color: #1e2d47;
}
.progress {
display: block;
margin: 0 auto;
overflow: visible;
transform: rotate(-90deg) rotateX(180deg);
}
.progress circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s ease;
stroke: #f5f5f5;
stroke-width: 2px;
}
.progress .bar {
stroke: #d66f6f;
}
.progressdiv {
position: relative;
}
.svgbox {
height: 0;
width: 100%;
padding-top: (svg height / svg width) * width-value;
position: relative;
}
JS:
(function() {
window.onload = function() {
var totalProgress, progress;
const circles = document.querySelectorAll(".progress");
for (var i = 0; i < circles.length; i++) {
totalProgress = circles[i]
.querySelector("circle")
.getAttribute("stroke-dasharray");
progress = circles[i].parentElement.getAttribute("data-percent");
circles[i].querySelector(".bar").style["stroke-dashoffset"] =
totalProgress * progress / 100;
}
};
})();
Codepen: https://codepen.io/daugaard47/pen/OGBbBK
推荐答案
您的svg中的 stroke-dasharray ="
值错误.正确的计算应为 2 *π* r
.在您的情况下,这意味着 2 *π* 50
,类似于 314.16
.
You have wrong values of stroke-dasharray=""
in your svg. Correct calculation should be 2*π*r
. That mean in your case 2*π*50
, which is something like 314.16
.
这篇关于动态径向进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!