循环进度显示超过100%

Question

我制作了一个圆形图表，如本文中所示：\n https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705

\n\n

但是，我也尝试在其上显示值 \xe2\x80\x8b\xe2\x80\x8ba 高于 100%（该图显示当月与前一个月的消耗量比较，有时需要看起来像这样） 。我尝试在第一个圆圈中添加另一个圆圈和不透明度，但看起来不太好。

\n\n

我希望它看起来像这样：

\n\n

\n\n

<svg viewBox="0 0 36 36" class="circular-chart cons">\n  <path class="circle-bg" d="M18 2.0845\n        a 15.9155 15.9155 0 0 1 0 31.831\n        a 15.9155 15.9155 0 0 1 0 -31.831" />\n  <path class="circle-round" stroke-dasharray="100 100" \n        style="opacity: 0.9;" d="M33.9155 18\n        a 15.9155 15.9155 0 0 1 -31.831 0\n        a 15.9155 15.9155 0 0 1 31.831 0" />\n  <path class="circle-round" stroke-dasharray="19 100" d="M33.9155 18\n        a 15.9155 15.9155 0 0 1 -31.831 0\n        a 15.9155 15.9155 0 0 1 31.831 0" />\n\n  <text x="18" y="20.35" class="percentage cons-fill">119%</text>\n</svg>\n

\n\n

.circle-bg {\n  fill: none;\n  stroke: #ddd;\n  stroke-width: 3.8;\n}\n.circle-round{\n  fill: none;\n  stroke-width: 2.8;\n  stroke-linecap: round;\n  animation: progress 1s ease-out forwards;\n}\n.circular-chart.cons .circle-round {\n  stroke: $cons;\n}\n@keyframes progress {\n  0% {\n    stroke-dasharray: 0 100;\n  }\n}\n.cons-fill {\n  fill: $cons;\n}\n

\n

Answer 1

问题是除非你延长路径，否则你不能走得比一整圈更远。我同意这不是显示这些值的最佳工具，但您可以执行以下操作：

:root{
  --cons: #00ff00;
  --atime: 1s;
}
.shade{
  fill: none;
  stroke: #002200;
  stroke-width: 2.8;
  /*stroke-linecap: round;*/
  animation: sprogress var(--atime) ease-out forwards;
}
.circle-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 3.8;
}
.circle-round{
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress var(--atime) ease-out forwards;
}
.circular-chart.cons .circle-round {
  stroke: var(--cons);
}
@keyframes sprogress {
  0% {
    stroke-dasharray: 0 0 4 146;
  }
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 150;
  }
}
.cons-fill {
  fill: var(--cons);
  font-size: 30%;
}

<svg viewBox="0 0 36 36" class="circular-chart cons" height="100vh">
  <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="119 31" 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
        a 15.9155 15.9155 0 0 1 -31.831 0 " />
  <path class="shade" stroke-dasharray="0 115 4 31" 
        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
        a 15.9155 15.9155 0 0 1 -31.831 0                         " />

  <text x="18" y="20.35" class="percentage cons-fill">119%</text>
</svg>

这个想法是路径现在有 150 个单元。为了标记路径所在的位置，您有一个带有 class 的路径shade。如果您需要超过 150 个，请添加更多a持续转动的元素，然后计算stroke-dasharray您需要哪些值。

顺便说一句，如果您stroke-linecap在shade类中取消注释 ，您将得到一个有趣的效果，因为两端都会显示，独立于stroke-dasharray。

评论后编辑：

首先，需要注意的是，原始代码中的技巧是圆周的周长为 100。因此，每个弧有 50 个单位。关于该stroke-dasharray属性，您可以为其指定破折号间隙值对。如果这些值的总和等于圆弧的周长，您可以轻松控制虚线的位置和长度。对于路径shade，您可以从0 0 4 146（无破折号、无间隙、4 个单位破折号、146 个单位间隙）到0 115 4 31（无破折号、115 个单位间隙、4 个单位破折号、31 个单位间隙）进行动画处理。这样，破折号始终有 4 个单位，末尾位于115 + 4 = 119单位处。这并不完美，因为起始值（破折号末尾）不是 0，而是 4。效果几乎不明显，但可以通过两种方式修复：

• 0 0 4 146用破折号 (到)的开头标记百分比0 119 4 27。
• shade从一开始就扩展路径，然后更改stroke-dasharray值。例如，如果您在开始处添加另一条弧，则周长将为 200，并且值将从0 46 4 150到0 165 4 31。