SVG Path '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.это лучший способ.Мы можем получить длину полукруга, вызвав getTotalLength() элемента path.В остальном процесс такой же.

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> элементов, называемый 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>