javascript - 为什么这个 SVG 径向进度(循环百分比)不起作用？

Question

基于 this tutorial on radial progress (我们称之为循环百分比)我们尝试为 0、20、40、60、80 和 100% 创建一些 SVG 绘图。

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

1. 创建两个 <circle> <svg> 中的元素标签
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>