动态径向进度条答案

【问题标题】：Dynamic Radial progress bar动态径向进度条
【发布时间】：2019-04-25 11:31:03
【问题描述】：

我正在为筹款活动制作径向进度表，并希望根据百分比跟踪捐款。

除了描边填充关闭之外，我一切正常。示例：我将数据百分比设置为 75，它呈现大约 55%。（填充描边开始显示在data-percent="38"）

我需要从 0% 到 100%

有人可以帮我解决计算错误吗？

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;
    }
  };
})();

代码笔： https://codepen.io/daugaard47/pen/OGBbBK

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您的 svg 中有错误的 stroke-dasharray="" 值。正确的计算应该是2*π*r。这意味着在你的情况下2*π*50，类似于314.16。

【讨论】：