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");
animNode.appendChild(animation);
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");