How to change SVG image through js?

I have a SVG image, I need a animation for the countdown clock. I want to make this cycle shorter than 1/60 per second.
<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>
What are the value of the svg file you need to modify for this and how to calculate the proportions?
March 23rd 20 at 19:17
1 answer
March 23rd 20 at 19:19
Here and CSS is enough (how to animate stroke-dashoffset), JS in this example is only responsible for the output of the counter value inside the circle:


Search by query:
by the way the pixels don't need to specify the parameters of the stroke - edmond_Turcotte commented on March 23rd 20 at 19:22
@edmond_Turcotte, my timer starts with a filled circle, so I do not fit css. Could you suggest which value I dynamically need to change in my example to create animation? - theo.Dooley commented on March 23rd 20 at 19:25
@theo.Dooley, the same as for CSS. Exactly the same. Calculates the entire length of the stroke (stroke-dasharray), divide it by desired number of seconds and add the resulting value to the stroke-dashoffset.

@edmond_Turcotte, Yes, I agree, just not my example. But it depends on the method of creating a stroke too. - Letitia_Langworth91 commented on March 23rd 20 at 19:28
@theo.Dooley, and Yes, that prevents the filling from zero to 100% as you should be, again stupidly at CSS?

- Letitia_Langworth91 commented on March 23rd 20 at 19:31

Find more questions by tags SVGJavaScript