4

Есть прогресс бар

<svg width=200 height=200>
      <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle>
      <circle cy=100 cx=100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="100, 1000"  stroke-dashoffset=0></circle>
</svg>

Как сделать чтобы оранжевая полоса начиналась свержу с центра окружности. Не могу понять? что значит атрибут stroke-dasharray, точнее значения в нем

100 - это длина оранжевой полоски

1000 - растояние между такими полосками

В чем измеряется данная величина и как сделать точку отсчета именно сверху?

Да, и как можно эту оранжевую полосу анимировать?

2 ответа 2

3

<svg style="height: 250px;">
        <style>
            .st0{
                -moz-transform: rotate(-90deg); /* Для Firefox */
                -ms-transform: rotate(-90deg); /* Для IE */
                -webkit-transform: rotate(-90deg); /* Для Safari, Chrome, iOS */
                -o-transform: rotate(-90deg); /* Для Opera */
                transform: rotate(-90deg);
            }
        </style>
  <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle>
  <circle class="st0" cy=100 cx=-100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="20%,1000"  stroke-dashoffset=0></circle>
</svg>

С начало обясню автору что такое stroke-dasharray:

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому.

Подробно о всех свойствах рассказано здесь.

А это пример который хотел автор:

<svg style="height: 250px;">
        <style>
            .st0{
                stroke-miterlimit: 5;
                -moz-transform: rotate(-90deg); /* Для Firefox */
                -ms-transform: rotate(-90deg); /* Для IE */
                -webkit-transform: rotate(-90deg); /* Для Safari, Chrome, iOS */
                -o-transform: rotate(-90deg); /* Для Opera */
                transform: rotate(-90deg);
            }
            .st0 {
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
                animation: dash 7s linear forwards;
            }

            @keyframes dash {
                from{
                    stroke-dashoffset: 1000;
                }
                to {
                  stroke-dashoffset: 0;
                }
            }
            
        </style>
  <circle cy=100 cx=100 r=80 fill=transparent stroke="black" stroke-width="20"></circle>
  <circle class="st0" cy=100 cx=-100 r=80 fill=transparent stroke="orange" stroke-width="20" stroke-dasharray="100, 500"  stroke-dashoffset=0></circle>
</svg>

12
  • без анимации приведите пример, когда заполнено 10% круга
    – ruslik
    26 июн 2017 в 11:57
  • что значит в единицах длины - в пикселях?
    – ruslik
    26 июн 2017 в 11:58
  • 2ПR, радиус у меня в пикселях, значит длина тоже получается в px?
    – ruslik
    26 июн 2017 в 11:59
  • @ruslik Обновил ответ. 26 июн 2017 в 12:00
  • 2
    @ruslik ответы на все ваши вопросы вы можете найти тут. svg-art.ru 26 июн 2017 в 12:17
2

По сути stroke-dasharray может содержать несколько значения 10,20,30..., где четными по порядку будут идти длины заполненных линий и нечетными - длины промежутков. После окончания - все повторяется. Все, что вам надо - это задать длину прогресса и максимальную длину без длины прогресса (чтобы избавиться от повторения), на подложке первым должен быть 0 (длина заполненной), потом - длина пустоты равная длинне прогресса и снова максимальную длину без длины прогресса.

function setProgress(elementId, val) {
  let el = document.getElementById(elementId);
  let backProgressEl = el.children[0];
  let progressEl = el.children[1];
  let maxLength = backProgressEl.getTotalLength();
  let progressLength = maxLength * val;
  backProgressEl.setAttribute('stroke-dasharray', '0,' + progressLength  + ',' + (maxLength  - progressLength));
  progressEl.setAttribute('stroke-dasharray', progressLength + ',' + (maxLength  - progressLength));
}

setProgress('progressBar', .3);

setTimeout(function() {
  setProgress('progressBar', .8);
}, 2000);
circle {
  transition: stroke-dasharray 1s;
}
<svg id="progressBar" width=200 height=200>
    <circle cy=100 cx=100 r=80 fill="transparent" stroke="black" stroke-width="20" stroke-dasharray="0,0,1000" transform="rotate(-90 100 100)"></circle>
    <circle class="progress" cy=100 cx=100 r=80 fill="transparent" stroke="orange" stroke-width="20" stroke-dasharray="0,1000" transform="rotate(-90 100 100)"></circle>
</svg>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.