Как изменить SVG картинку через js?

Question

[Joirvy]

У меня есть SVG картинка, мне необходима анимация для таймера обратного отчёта. Я хочу делать этот круг короче на 1/60 каждую секунду.

<svg viewBox="0 0 200 200" preserveAspectRatio="none" class="progress-seconds">
<circle cx="100" stroke-dasharray="0 0" cy="100" r="42" id="progress-seconds" fill="none" stroke="#ff7323" stroke-width="10" transform="rotate(-90,100,100)"></circle>
</svg>

https://jsfiddle.net/xzngybuj/1/
Какое значение у svg файла необходимо изменить для этого и как рассчитать пропорции?

Answer 1

[Rustam Bainazarov]

Тут и CSS хватит (анимирование stroke-dashoffset), JS в этом примере отвечает только за вывод значения счётчика внутри круга:


Оригинал:
https://codepen.io/zebateira/pen/VvqJwm

Поиск по запросу:
https://www.google.com/search?q=svg+timer+circle&o...

Comments

[Максим]

кстати пиксели не надо указывать в параметрах stroke

[Joirvy]

Максим Ленский, мой таймер не запускается с заполненного circle, поэтому мне не подходит css. Не могли бы вы подсказать какое именно значение мне динамически необходимо менять в моём примере для создания анимации?

[Rustam Bainazarov]

Joirvy, то же самое, что и для CSS. Точно такое же. Вычисляет всю длину обводки (stroke-dasharray), делите её на нужное кол-во секунд и добавляете полученное значение к stroke-dashoffset.

Максим Ленский, да, согласен, просто не мой не пример. Но это зависит от метода создания обводки тоже.

[Rustam Bainazarov]

Joirvy, и да, что мешает сделать заполнение с нуля до 100%, как вам и надо, опять же тупо на CSS?