SVG路径'D'属性半圈进度

Question

我想把一个半圆形的条形转向顺时针方向。我可以使用stroke-dasharray来做到这一点。我想做半圈进度条。我必须通过给出一个百分比逆时针做这个

<svg viewBox="0 0 110 110">
  <path
        d="M 5 5 A 50 50 0 0 0 105 5"
        fill="none"
        stroke="blue"
        stroke-width="2" />
</svg>

Answer 1

Method 1: Calculate mathematically

您可以通过使用数学来计算半圆的长度来获得半圆的长度。

你的圆的半径为50.所以圆的圆周将是2 * 50 * PI或314.15 ...然后我们需要将它分成两半，因为你只有半个圆。

function setProgress(percent)
{
  var bar = document.getElementById("progress");
  var barLength = (2 * 50 * Math.PI) / 2;
  var dashLength = percent * barLength / 100;
  bar.setAttribute("stroke-dasharray", dashLength + " " + barLength);
}



setProgress(45);

<svg viewBox="0 0 110 110">
  <path id="progress"
        d="M 5 5 A 50 50 0 0 0 105 5"
        fill="none"
        stroke="blue"
        stroke-width="2" />
</svg>

Method 2: using getTotalLength()

但是这种方法要求您事先知道圆的大小是50.有一种更好的方法。我们可以通过在路径元素上调用getTotalLength()来获得半圆的长度。其余的过程是一样的。

function setProgress(percent)
{
  var bar = document.getElementById("progress");
  var barLength = bar.getTotalLength();
  var dashLength = percent * barLength / 100;
  bar.setAttribute("stroke-dasharray", dashLength + " " + barLength);
}



setProgress(45);

<svg viewBox="0 0 110 110">
  <path id="progress"
        d="M 5 5 A 50 50 0 0 0 105 5"
        fill="none"
        stroke="blue"
        stroke-width="2" />
</svg>

Method 3: pathLength

最后一种方法依赖于称为<path>的pathLength元素的特殊属性。

通过将pathLength="100"添加到<path>，我们告诉浏览器在计算短划线长度和偏移时假装路径长度为100。这意味着我们可以在设置破折号模式时直接使用我们的百分比值。

这样做的缺点是一些旧的浏览器不支持pathLength，或者它们有bug。例如，此方法在IE中不起作用。如果您需要支持旧浏览器，请改用方法2。

function setProgress(percent)
{
  var bar = document.getElementById("progress");
  bar.setAttribute("stroke-dasharray", percent + " 100");
}



setProgress(45);

<svg viewBox="0 0 110 110">
  <path id="progress"
        d="M 5 5 A 50 50 0 0 0 105 5"
        fill="none"
        stroke="blue"
        stroke-width="2"
        pathLength="100"/>
</svg>