var biggeranimation = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); biggeranimation.setAttribute('xlink:href', '#boomcirc'); biggeranimation.setAttribute('attributeName', 'r'); biggeranimation.setAttribute('values', '1;30'); biggeranimation.setAttribute('dur', '2s'); biggeranimation.setAttribute('repeatCount', '1'); document.getElementById('boomie').appendChild(biggeranimation);

It is necessary to add animation using JavaScript like this ... Add an element on which actions are performed, it turned out, but it is not animated. What's the catch?

1 answer 1

It would be great to see the SVG code that is being manipulated. Judging by the fact that the animate element animates the radius, then why the line

 biggeranimation.setAttribute('xlink:href', '#boomcirc');

I do not understand. If you delete it and add animation to an existing element, then everything works as it should.

 var biggeranimation = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); biggeranimation.setAttribute('attributeName', 'r'); biggeranimation.setAttribute('from', '1'); biggeranimation.setAttribute('to', '30'); biggeranimation.setAttribute('dur', '10s'); biggeranimation.setAttribute('repeatCount', '1'); document.getElementById('boomie').appendChild(biggeranimation); 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" xml:space="preserve"> <circle cx='50' cy='50' r='20' fill="black" id="boomie"></circle> </svg>