CODEWITHSUNDEEP
javascriptsvg
Danny
Danny

Reputation: 384

Can't append <animateTransform> element to SVG path

I'm attempting to animate certain paths in an SVG file, but I can't seem to append the necessary <animateTransform> tag as a child of these paths.

Here's my code:

currentState.addEventListener("click", function(event) {
    var i = 0;

    var map_anim = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
    map_anim.setAttributeNS(null, 'attributeName', 'transform');
    map_anim.setAttributeNS(null, 'attributeType', 'XML');
    map_anim.setAttributeNS(null, 'type', 'scale');
    map_anim.setAttributeNS(null, 'to', '2');
    map_anim.setAttributeNS(null, 'fill', 'freeze');
    var paths = event.currentTarget.children;
    for (i = 0; i < paths.length; i++) {
    paths[i].appendChild(map_anim);
    }
    map_anim.beginElement();
}, true);

I've stepped through this code with a debugger and I know that the SVG paths are being accessed as part of the paths array. I can't seem to figure out why appendChild won't work, and I haven't been able to find a different method that I can substitute.

Can you please advise me on how to get this animation to work?

Here is the code for the path that is logged to the console after the onclick function runs:

<path xmlns="http://www.w3.org/2000/svg" class="st12" id="path" d="M165.7,347.4c3.3,0.9,6.4,1.9,9.6,2.6c1.1,0.2,2.3-0.4,3.5-0.6c-0.5-1.2-0.7-2.7-1.5-3.4   c-4.8-4.1-11.8-5.7-18.5-4.2c0.3-1.6,0.6-3,0.7-4.5c0.2-2,0.4-4.1,0.3-6.1c-0.2-2.2-1.4-3.8-3.6-4.6c-3.3-1.2-4.7-3.8-4.6-6.9   c0.1-4.2,1.1-8.4,1.1-12.6c0.1-8.1,0.7-16.2-3.2-23.8c-0.4-0.7-0.1-2.1,0.4-2.9c1.1-1.7,2.5-3.2,3.9-4.7c6.5-7.4,9.3-15.9,8.6-25.6   c0-0.5,0-1,0-1.8c23.4,6.4,46.6,12.7,70.1,19.2c-1,3.3-1.9,6.5-2.9,9.7c-5.5,18.5-11.1,37-16.7,55.4c-0.5,1.7-0.1,2.9,0.8,4.2   c22,32.4,43.9,64.9,65.8,97.3c3.1,4.5,6,9.1,9.2,13.5c0.6,0.9,1.8,1.4,3,1.9c0.4,5.6,1.8,11.2,4.6,16.3c0.2,0.4-0.1,1.5-0.5,2   c-2,2.5-4.1,5-6.3,7.4c-4,4.2-6.8,8.9-8.2,14.5c-0.4,1.5-0.1,3.4,0.4,4.9c1.2,3.3-0.4,8.3-3.6,9.9c-0.6,0.3-1.7,0.3-2.4,0   c-11.7-5.6-24.3-7.7-37.1-8.6c-0.9-0.1-1.7-0.3-2.6-0.3c-1.6,0-2.1-0.8-2.3-2.4c-1.1-8.1-2.6-16-6.8-23.2c-2-3.5-4.7-6.2-8.9-7.1   c-0.6-0.1-1.3-0.9-1.6-1.6c-0.7-1.4-1-3.2-1.9-4.4c-1.1-1.3-2.6-2.9-4.1-3.1c-5.7-0.7-8.2-5-11.3-8.7c-1-1.2-2-2.6-3.4-3.1   c-4.2-1.7-8.6-3-12.9-4.5c-0.9-0.3-1.8-0.7-2.6-1c-2-0.7-2.5-1.8-2-3.9c1.9-6.9,2.3-13.9-0.9-20.6c-1.3-2.8-3.2-5.4-5-8   c-2.7-4-6-7.7-6.8-12.7c-0.3-1.7-0.3-4.1,0.6-5.3c3.7-4.7,2.3-9.5,0.9-14.3c-0.9-3.2-2.2-6.4-3.2-9.6c-0.2-0.7-0.1-1.9,0.3-2.2   c3.5-2.8,3.3-6.2,1.8-9.9c-0.2-0.4-0.3-0.8-0.4-1.2C165.5,348.4,165.6,348.2,165.7,347.4z" fill="#000000" fill-opacity="1">
    </path>

Thank you!

Upvotes: 0

Views: 341

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

You need to create a new element for each path. If you appendChild() an existing element to another parent, it just moves to the new parent. So the result of your code is that only the last path will end up with the <animateTransform>.

Upvotes: 1

Related Questions