Html 构建循环百分比图

我想建立一个SVG循环图，我已经取得了一定的成功

HTML

获取输出

期望输出

我认为笔划划线阵列存在问题

非常感谢您的评论

我已经提到

尝试使用它在几秒钟内创建没有一行代码的图表

---

根据您的要求，尝试此链接，

我将这样做：我将设置笔划dashoffset从50到0的动画

在您的代码中，我已更改了笔划数组。在这种情况下，第一个值是笔划的长度，第二个值是间隙的长度。间隙必须足够大，才能使划水只发生一次。在我使用的代码中，周长的值为100

您的第一条路径最后一条，因为我希望它高于其他两条路径。对于这个路径，我使用的是

stroke dasharray=“50100”

笔划的长度是50，间距是100

对于您的第一条路径，我使用的是

stroke dasharray=“70100”

为什么是75？50+25 = 75. 前50个单元位于下一条路径下。只有25个单位仍然可见

您的最后一条路径位于第一位，笔划dasharray=“100100”。此路径的75个单位现在位于先前路径的下方

我希望这就是你需要的

svg{border:1px solid}
.圆图{
显示：块；
利润率：5%自动；
最大宽度：80%；
最大高度：240px；
利润底部：15%；
}
.那个圈子{
填充：无；
笔画宽度：2；
笔划线头：圆形；
行程偏移：50；
动画：前进1秒，向前放松；
盒影：0 8px 25px 0#e5；
}
@关键帧进度{
100% {
笔划偏移：0；
}
}
.百分比{
填充：#4285f4；
字号：0.375em；
文本锚定：中间；
字体系列：AvenirNext；
字体大小：粗体；
字体风格：普通；
字体拉伸：正常；
线高：1；
字母间距：正常；
}
.完成百分比{
填充：#9b9b9b；
字体大小：0.2米；
字体系列：AvenirNext；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
}

50%
网间网操作系统

我通过自己的逻辑尝试找到了一种方法

。圆形图表{
显示：块；
利润率：5%自动；
最大宽度：80%；
最大高度：240px；
利润底部：15%；
}
.那个圈子{
填充：无；
笔画宽度：2；
笔划线头：圆形；
动画：前进1秒，向前放松；
盒影：0 8px 25px 0#e5；
}
@关键帧进度{
0% {
笔划数组：0 100；
}
}
.百分比{
填充：#4285f4；
字号：0.375em；
文本锚定：中间；
字体系列：AvenirNext；
字体大小：粗体；
字体风格：普通；
字体拉伸：正常；
线高：1；
字母间距：正常；
}
.完成百分比{
填充：#9b9b9b；
字体大小：0.2米；
字体系列：AvenirNext；
字号：500；
字体风格：普通；
字体拉伸：正常；
线高：正常；
字母间距：0.1px；
}

每次申请的时间

50%
网间网操作系统

不，我们不能使用自定义图表，我们必须使用设计师给出的所需图表。在当前图表中，只有3个元素百分比。如果假设有10个元素百分比，那么如何绘制上述图表。所有这些都是动态的。在这种情况下，您需要使用数据创建一个对象，但这是另一个问题，如果您喜欢我的答案，请接受我的答案并提出另一个问题，我很乐意提供帮助，您刚刚创建了一个没有任何逻辑值的图表。我已经找到了一个可行的方法。过一段时间后，我将更新我的答案。谢谢您在代码段下面的描述。这对我帮助很大。

<div>
            <p class="Project_Analytics_Heading text-center">
                Time per Application
            </p>
            <svg viewBox="0 0 36 36" class="circular-chart">

                <path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831" />

                <text x="18" y="20.35" class="percentage">50%</text>
                <text x="13" y="25" class="percentage_done">iOS</text>

            </svg>
        </div>

.circular-chart {
  display: block;
  margin: 5% auto;
  max-width: 80%;
  max-height: 240px;
  margin-bottom: 15%;
}
.that-circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
  box-shadow: 0 8px 25px 0 #e5e5e5;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #4285f4;
  font-size: 0.375em;
  text-anchor: middle;
  font-family: AvenirNext;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
}
.percentage_done {
  fill: #9b9b9b;
  font-size: 0.2em;
  font-family: AvenirNext;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
}