外部SVG中的anime.js querySelectorAll()中断属性‘querySelectorAll：’的[NodeList]

Question

我试图用<rect>动画化anime.js中的所有SVG。

只要SVG是内联的，我就可以调用querySelectorAll()或getElementsByTagName()，并将这个nodelist作为targets:的属性，所有选定的元素都将被动画化。

elements = document.querySelectorAll("rect");

动画内部代码

targets: elements,

但：当我将相同的SVG代码链接到外部SVG (嵌入<object>元素)时，anime.js停止工作(只有FireFox才能工作，仍然)。

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

targets: elements2,

当我获得targets:属性的单个元素时，如

targets: elements2[0|,

anime.js将激活单个元素。

一个函数也不能工作。

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

如何使用anime.js动画化边缘/IE/Safari/Chrome中的外部SVG中的元素作为目标？

Answer 1

因此，anime.js和外部SVG的唯一解决办法似乎是收集新数组中的所有元素，并将其用作targets:属性。

var elements3 = new Array();

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

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

targets: elements3,

但我不明白为什么要这样..。