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

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

方法2：使用getTotalLength（）

但是该方法要求您事先知道圆的大小为50。有一种更好的方法。我们可以通过在path元素上调用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>

方法3：pathLength

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

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

这样做的缺点是某些较旧的浏览器不支持<path>，或者存在错误。例如，此方法在IE中不起作用。如果需要支持较旧的浏览器，请改用方法2。

pathLength

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



setProgress(45);