在svg或css中创建一个圆形进度条[重复]答案

【问题标题】：Create a circle progressbar in svg or css [duplicate]在svg或css中创建一个圆形进度条[重复]
【发布时间】：2019-05-22 09:10:45
【问题描述】：

我尝试设计一个圆形进度条，里面有一些信息。像这样的东西。

我有 svg，但我也不能在圈内写字。起点和终点的距离非常小。我正在寻找类似图像的东西。

svg {
  height: 200px;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 3.142 1.85);
  stroke-dashoffset: 80;
  / adjust last number for variance /
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
 <path class="grey" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
 <path class="purple" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
</svg>

【问题讨论】：

这个要求现在解决了吗？你试过roundsliderui.com 插件了吗？

标签： html css svg

【解决方案1】：

这是我的解决方案；为了计算路径的长度，您可以使用path.getTotalLength() 方法。

为了使文本围绕一个点（在本例中为 SVG 画布的中心）居中，请使用 dominant-baseline="middle" text-anchor="middle"

theRange.addEventListener("input",()=>{
  let v=220.6 - map(theRange.value,0,100,0,220.6);
  thePath.style.strokeDashoffset = v
  theText.textContent = theRange.value+"%"
})


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

svg {
  height: 200px;
  margin: auto;
  display: block;
  border:1px solid;
  overflow:visible
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

.grey {
  stroke: lightgrey;
}

.purple {
  stroke: purple;
  stroke-dasharray: 220.6;
  stroke-dashoffset: 44.12; 
}

p{text-align:center}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 110">
<defs>
 <path id="thePath" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
</defs>
 <use xlink:href="#thePath" id="base" class="grey" />   
 <use xlink:href="#thePath" id="slider" class="purple" />
  
  <text id="theText" x="55" y="55" dominant-baseline="middle" text-anchor="middle">80%</text>
</svg>

<p><input id="theRange" type="range" min="0" max="100" value="80" step=".1" /></p>

【讨论】：