如何在 svg 中创建此图表上的百分比？答案

【问题标题】：How do I create the percentage on this graph in svg?如何在 svg 中创建此图表上的百分比？
【发布时间】：2020-08-13 08:21:44
【问题描述】：

我正在尝试在 svg 中开发此图表：

chart

.circulo{
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 50%;
  border: 35px solid pink;
  position: absolute;
top: 10px;
    left: 57px; 
}

svg{
  transform: rotate(180deg);
  height: 162px;
}
circle{
    stroke-dashoffset: 0 !important;
    stroke-dasharray: 5;
    r: 140;
    cy: 0;
    cx: 176;
    stroke-width: 40px;
}

<svg width="360" height="360" xmlns="http://www.w3.org/2000/svg">
 <circle r="89.85699" cy="50" cx="50" stroke-width="50" stroke="#69aff4" fill="none" style="stroke-dashoffset: 360;"></circle> 
</svg>

但我无法给出百分比。

我尝试过使用 stroke-dashoffset 和 stroke-dasharray，但我不能。

我该怎么做？

【问题讨论】：

如果您还使用stroke-dasharray 作为小散列值，您将无法使用stroke-dashoffset 部分描边圆圈。一种方法是使用实心笔划，然后应用蒙版来创建散列。然后你可以使用dashoffset 技术只抚摸圆圈的一部分
什么的百分比？（SVG 看起来像是一个带有错误viewBox 的完整圆圈：您的代码的哪一部分应该与百分比相关联？）
添加到@Sean 评论：这里有一个使用stroke-dashoffset 和stroke-dasharray Building a Progress Ring, Quickly 的教程，这也说明了Sean 的观点。您将需要使用一些饼图机制来获得“虚线”版本，教程：A simple pie chart in SVG（迄今为止我发现的最简单、最聪明的）。您需要为每个“饼图”添加一些 offset 以创建间隙。

标签： javascript css svg

【解决方案1】：

我设法用肖恩的想法解决了。谢哥！

<svg class="svg2" width="360" height="360" xmlns="http://www.w3.org/2000/svg">
    <circle class="circle2" r="140" cy="0" cx="176" stroke-width="50" stroke="red" fill="none" style="stroke-dashoffset: 360;"></circle> 
</svg>
<svg class="svg1" width="360" height="360" xmlns="http://www.w3.org/2000/svg">
    <circle class="circle1" r="140" cy="0" cx="176" stroke-width="50" stroke="white" fill="none" style="stroke-dashoffset: 360;"></circle> 
</svg>



.svg1{
    transform: rotate(180deg);
    height: 162px;
}
.circle1{
    stroke-dashoffset: 0 !important;
    stroke-dasharray: 5;
    stroke-width: 40px;
}

.svg2{
    transform: rotate(180deg);
    height: 162px;
    position: absolute;
    z-index: -1;
}
.circle2{
    stroke-dashoffset: 90 !important;
    stroke-dasharray: 440;
    stroke-width: 38px;
}

https://codepen.io/sauloduarte/pen/xxVZOKL

【讨论】：