在SVG或CSS中创建圆形进度栏

Question

我尝试设计一个内部包含一些信息的圆形进度栏。这样的事情。

我有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>

Answer 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>