【发布时间】：2020-03-24 20:09:08
【问题描述】：
我在这篇文章中做了一个圆形图表： https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
但是，我也尝试在其上显示高于 100% 的值（该图显示了当月与上一月的消费比较，有时它需要看起来像这样）。我尝试在第一个圆圈中添加另一个圆圈和不透明度，但看起来不太好。
我希望它看起来像这样：
<svg viewBox="0 0 36 36" class="circular-chart cons">
<path class="circle-bg" 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="circle-round" stroke-dasharray="100 100"
style="opacity: 0.9;" d="M33.9155 18
a 15.9155 15.9155 0 0 1 -31.831 0
a 15.9155 15.9155 0 0 1 31.831 0" />
<path class="circle-round" stroke-dasharray="19 100" d="M33.9155 18
a 15.9155 15.9155 0 0 1 -31.831 0
a 15.9155 15.9155 0 0 1 31.831 0" />
<text x="18" y="20.35" class="percentage cons-fill">119%</text>
</svg>
.circle-bg {
fill: none;
stroke: #ddd;
stroke-width: 3.8;
}
.circle-round{
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
.circular-chart.cons .circle-round {
stroke: $cons;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.cons-fill {
fill: $cons;
}
【问题讨论】：
-
您好 Jakub，欢迎使用 stackoverflow :) 有必要包含与您的问题相关的 your 代码，以便我们知道如何为您提供帮助。您可以查看问题的预期内容here 此外，请将您的范围限制为每个帖子 1 个问题。就我而言，您能否详细说明超过 100% 的含义？
-
您好，非常抱歉，抱歉。我添加了代码并删除了第二个问题。
-
好的，看起来不错。我不确定您是否在谈论文本，或者您是否想要重复加载程序或其他东西（它只是无限循环）。我尝试查找并没有看到重复的问题，所以如果有人在星期六之前没有遇到这个问题，我会尝试回答。所以澄清一下，您不是在寻找一个无限循环样式的加载器like this，这实际上是一回事吗？你想要一个分层的进度表吗？没有 JavaScript？
-
没有无限循环样式的加载器。这只是以 % 显示的两个值的静态比较。如果需要 JS，我愿意接受建议。我现在想在 中添加一条带有阴影的小线，如果值高于 100%，但到目前为止我没能做到。感谢您对该主题感兴趣。
-
坦率地说，循环进度项在这里并不合适。它们不适用于 100% 以上的值。条形图会是更好的选择。
标签： css animation svg css-animations