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>
</svg>

https://jsfiddle.net/xzngybuj/1/
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
Solution
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:


Original:
https://codepen.io/zebateira/pen/VvqJwm

Search by query:
https://www.google.com/search?q=svg+timer+circle&o...
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