SVG Animation with JS Happens Instantly

I am trying to animate svg circle elements by changing their cx and cy values. I did this using javascript but when I refresh my browser the animation seems to have run already, not taking the “dur” time I put in. Anyone have any idea why this is or could point me in the right direction?

This is my javascript code to create the animation element. It is in the same svg as the “animatingNode”. I also tried making the begin value “click” but clicking on the node didn’t run the animation

const animation = document.createElementNS(svgns, "animate");
    animation.setAttribute("xlink:href", "animatingNode");
    animation.setAttribute("id", "animation");
    animation.setAttribute("attributeName", "cx");
    animation.setAttribute("from", "10");
    animation.setAttribute("to", "50");
    animation.setAttribute("dur", "2s");
    animation.setAttribute("begin", "0s");
    animation.setAttribute("fill", "freeze");
    animation.setAttribute("restart", "never");

sometimes you have to wait for the document to be ready.

hard to say without a link to the actual code, can you provide a codepen? Is there a delay that you can use?

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.