如何完全准确地设置半径线性梯度%

Question

我正在测试这段代码：

 <svg height="150" width="150">
      <defs>
        <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
        </radialGradient>
      </defs>
      <ellipse cx="100" cy="100" rx="30" ry="30" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="20" transform-origin="100 100" transform="rotate(-95)"/>
    </svg>

我已经用 stroke-dasharray="200" 和 stroke-dashoffset="20" 进行了测试，这是我发现的最准确的值。基于 this 我必须找到设置圆百分比的值。使用 troke-dasharray="200" stroke-dashoffset="20" 圆圈是 10% 跳跃的功能，但是当我想将值设置在 91%-99% 之间时，圆圈似乎已经完成。看起来接近 0% 的值圆圈看起来像空的。

我需要完全准确地设置没有旋转的圆的百分比。（圆圈必须从它的顶部开始）

抱歉，如果我的英语不完美。谢谢

Answer 1

为了使您的进度条正常工作，必须计算您用于虚线图案和虚线偏移的值以匹配您的圆圈大小。

你的圆的半径是 30，所以周长是 30 * 2 * PI = 188.5。

这是您需要在破折号模式中使用的值。

stroke-dasharray="188.5 188.5"

要显示百分比，您可以相应地调整破折号图案。例如，90% 可以通过以下方式实现：

stroke-dasharray="169.65 188.5"

<svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="30"
          stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"
          stroke-dasharray="169.65 188.5"
          transform="rotate(-95, 100, 100)"/>
</svg>

另一种处理进度条的方法是使用破折号偏移量。特别是如果你想动画进度条。

以这种方式完成 90% 的方法是将破折号偏移设置为 (1 - percentage_fraction) * 周长。所以 90% 将对应于 (1 - 0.9) * 188.5 = 18.85

stroke-dasharray="188.5 188.5"
stroke-dashoffset="18.9"

<svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="30"
          stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"
          stroke-dasharray="188.5 188.5" stroke-dashoffset="18.9"
          transform="rotate(-95, 100, 100)"/>
</svg>

如何完全准确地设置半径线性梯度%

How to set the radius linear gradient % with full accuracy

svg

ellipse

radial-gradients