Question

基于this tutorial on radial progress（我们称之为循环百分比），我们尝试为0％，20％，40％，60％，80％和100％创建一些SVG图纸。

以下是我们为每个SVG采取的步骤：

在<circle>代码

<svg>

根据百分比，半径和周长计算stroke-dasharray和stroke-dashoffset，以使stroke-dasharray和stroke-dashoffset的总和等于周长

Here in this sample您可以看到SVG图纸的0％，20％，40％，60％，80％，100％的进度。

.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

您不了解笔画阵列的工作原理。如果你只是正确调整仪表盘阵列的大小（等于周长 - 2 * Pi * R），那么你不需要偏移量，你会得到（我认为）你的东西。期待。这是第一个，例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: