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

方法一:数学计算

用数学计算半圆的长度，就可以得到半圆的长度。

您的圆的半径为 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>

方法二:使用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>

方法三:pathLength

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

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

这样做的缺点是一些旧的浏览器不支持 pathLength ，或者他们有错误。例如，此方法在 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>