动态径向进度条 [英] 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屋！