使用JavaScript复制CSS或SMIL动画

Question

SMIL animations, as well as animating SVG elements using CSS, is not suported on IE 11 .

To animate my SVG, I would like to use JavaScript, changing the stroke-dashoffset attribute. This is how my SVG looks like:

  <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 70 70" > <rect width="70px" height="70px" stroke="gray" stroke-width="20" fill="none" /> <rect width="70" class="animate" height="70" stroke="yellow" stroke-width="20" fill="none" stroke-dasharray="120"> <!-- A part that I want to replicate with JavaScript --> <animate attributeName="stroke-dashoffset" calcMode="linear" values="20 20;-120;-240" keyTimes="0;0.5;1" dur="1" begin="0s" repeatCount="indefinite" /> </rect> </svg> 

I know how that the attribute can be changed using style.strokeDashoffset .

The question is: how do I make my animation so that it changes the attribute exactly at the time I want it to?

So from the example code above: I want the strokeDashoffset property to be changed to 20 20 at time 0, to: -120 at 0.5 and: -240 at time 1 (the animation will work idenfinitely). I tried doing it in a discrete manner but that's obviously not what I need here, as the animation needs to be continuous.

Answer 1

You may use setInterval() function.

let timer = setInterval(function() { if (animation complete) clearInterval(timer); else keep changing the values}, time);

And try conveying your animation property as a mathematical function of the interval.

Hope this helps