Блог

Главная - Вопросы по программированию - SVG путь ‘D’ атрибута half circle прогресс

SVG путь ‘D’ атрибута half circle прогресс

#javascript #svg

#javascript #svg

Вопрос:

Я хочу сделать полоску в виде полукруга, которая поворачивается по часовой стрелке. Я могу сделать это с помощью 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>

Комментарии:

1. И ваш вопрос таков…

2. Я хочу сделать полукруглый индикатор выполнения. Я должен сделать это против часовой стрелки, указав процент.

3. Попробуйте это: d="M 5 5 A 50 50 0 0 1 105 5" . Также вам может потребоваться изменить viewBox на 0 -50 110 110 . Я надеюсь, что это то, о чем вы спрашивали

Ответ №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: длина пути

Один из последних методов основан на специальном атрибуте <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>