Определение длины окружности для аттрибута stroke-dasharray

Question

Круговой процентный прогресс бар В данном ответе на вопрос, есть такой код:

<svg id="svg" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

Как видно, тут 2 одинаковых svg элемента, в которых есть path c атрибутом stroke-dasharray. В первом случае, атрибут имеет значение 1,250.2, во втором, 125.6,125.6. Второе значение в данном атрибуте - это длина окружности. По моим подсчетам, длина окружности должна быть 282.74... (r="45" * 2 * пи), однако, в коде, она совсем другая.

Вопрос: Почему длина окружности у двух одинаковых svg - разная?
Что влияет на ее значение?
Как ее правильно посчитать?

stroke-dasharray никак не связан с окружностью, второе число там это размер пропуска между штрихами, у круга радиус 45, но у дуг окружностей радиус 40, 40*2*3.14=251.2 — Stranger in the Q, Sep 11 '19 at 11:00
ну Вы правильно считаете, только радиус не тот взяли — Stranger in the Q, Sep 11 '19 at 11:04
@StrangerintheQ радиус 40 получился r - stroke-width? — Dmytro, Sep 11 '19 at 11:09
нет, a 40 40 это команда дуги эллипса с радиусами 40 и 40, то есть окружности с радиусом 40 — Stranger in the Q, Sep 11 '19 at 11:12

Alexandr_TT · Accepted Answer · 2019-09-19T07:18:37.487

Почему длина окружности у двух одинаковых svg - разная? Что влияет на ее значение? Как ее правильно посчитать?

Как ответил в комментарии @StrangerintheQ радиус окружности в данном примере равен 40 при этом значении радиуса полная длина окружности равна - 40*2*3.14=251.2

Первый фрагмент кода показывает сегмент окружности равной одному проценту от общей длины.

stroke-dasharray="1,250.2", где длина черты -1 пробел равен 250.2 в сумме это будет вся длина окружности -251.2

<svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>

Второй фрагмент кода показывает сегмент окружности равной половине от общей длины, то есть 50%

stroke-dasharray="125.6,125.6", где длина черты -125.6 пробел равен 125.6 в сумме это будет вся длина окружности - 251.2

<svg width="50%" height="50%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

Анимация прогресс бара

С помощью SMIL

Для анимации нам нужно увеличивать длину черты от нуля до максимума 251.2
соответственно пробел будет уменьшаться от максимума 251.2 до 0

<animate attributeName="stroke-dasharray" from ="0, 251.2" to = "251, 0" dur="4s" 
repeatCount="indefinite" />

<svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="0,251.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
     <animate attributeName="stroke-dasharray" from ="0, 251.2" to = "251, 0" dur="4s" repeatCount="indefinite" />
   </path>
</svg>

С помощью JS

Механизм анимации тот же, что и при использовании SMIL - увеличение длины черты от нуля до максимума 251.2

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
var s = Snap('#animated');
var progress = s.select('#progress');
progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

body{text-align:center;font-family:sans-serif;}
svg{width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

Пример JS взят из топика, на который ссылается автор вопроса

Определение длины окружности для аттрибута stroke-dasharray

1 Answers1

Анимация прогресс бара

Linked