Search code examples
svgexternalnodelistanime.js

anime.js querySelectorAll() in external SVG breaks [NodeList] for attribute 'targets:'

I'm trying to animate all <rect> within an SVG with anime.js.

As long as the SVG is inline, I can call a querySelectorAll() or getElementsByTagName() and take this nodelist as the attribute for targets: and all selected elements will be animated.

elements = document.querySelectorAll("rect");

inside anime code

targets: elements,

BUT: When I link the same SVG code to an external SVG (embeded with an <object> element), anime.js stopps working (only FireFox will work,still) when I set 

elements2 = document.getElementById("SVG").contentDocument.querySelectorAll("rect");

targets: elements2,

When I get single elements for the targets: attribute like 

targets: elements2[0|,

anime.js will animate the single element.

A function will not work, too.

targets: function(i){return elements2[i];},

How can I get the elements as targets in an external SVG in Edge/IE/Safari/Chrome to be animated with anime.js?

Solution

  • So the only workaround for anime.js and an external SVG seems to be, to collect all elements in a new array and use this as targets: attribute.

    var elements3 = new Array();

elements2 = document.getElementById("SVG").contentDocument.querySelectorAll("rect");

for (i = 0; i<elements2.length; i++) {
    elements3.push(elements2[i]);
}

targets: elements3,

    But I do not understand why this is necessary...