为什么这个 SVG 径向进度（圆形百分比）不起作用？

Question

基于this tutorial on radial progress（我们称之为圆形百分比），我们尝试创建一些 0、20、40、60、80 和 100% 的 SVG 绘图。

这些是我们为每个 SVG 采取的步骤：

1. 在<svg> 标签内创建两个<circle> 元素
2. 根据百分比、半径和周长计算stroke-dasharray 和stroke-dashoffset，使得stroke-dasharray 和stroke-dashoffset 之和应等于周长

Here in this sample 你可以看到 0、20、40、60、80、100% 进度的 SVG 绘图。

.circularPercentage {
  transform: rotate(-90deg);
}

<svg class="circularPercentage" fill="none" width="150" height="150" percent="0">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#FF0000" stroke-width="15" r="67.5" stroke-dasharray="424.11500823462205" stroke-dashoffset="0"></circle>
</svg>

<svg class="circularPercentage" fill="none" width="150" height="150" percent="20">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#FF6600" stroke-width="15" r="67.5" stroke-dasharray="84.82300164692441" stroke-dashoffset="339.29200658769764"></circle>
</svg>

<svg class="circularPercentage" fill="none" width="150" height="150" percent="40">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#FFCC00" stroke-width="15" r="67.5" stroke-dasharray="169.64600329384882" stroke-dashoffset="254.46900494077323"></circle>
</svg>

<svg class="circularPercentage" fill="none" width="150" height="150" percent="60">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#CBFF00" stroke-width="15" r="67.5" stroke-dasharray="254.46900494077323" stroke-dashoffset="169.64600329384882"></circle>
</svg>

<svg class="circularPercentage" fill="none" width="150" height="150" percent="80">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#65FF00" stroke-width="15" r="67.5" stroke-dasharray="339.29200658769764" stroke-dashoffset="84.82300164692441"></circle>
</svg>

<svg class="circularPercentage" fill="none" width="150" height="150" percent="100">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="#00FF00" stroke-width="15" r="67.5" stroke-dasharray="424.11500823462205" stroke-dashoffset="0"></circle>
</svg>

我们错过了什么，它对于 0 和 100 以外的百分比不能按预期工作？

Answer 1

您不了解 stroke dash-array 的工作原理。如果您只是正确调整破折号阵列的大小（等于周长 - 2*Pi*R），那么您不需要偏移量，您会得到（我认为）您期望的东西。这里是第一个，例如：

.circularPercentage {
  transform: rotate(-90deg);
}

<svg class="circularPercentage" fill="none" width="150" height="150" percent="20">
    <circle class="background" fill="none" stroke="#e6e6e6" cx="75" cy="75" stroke-width="15" r="67.5"></circle>
    <circle class="percentage" fill="none" cx="75" cy="75" stroke="orange" stroke-width="15" r="67.5" stroke-dasharray="80 344.17" stroke-dashoffset="0"></circle>
</svg>