外部SVG中的anime.js querySelectorAll（）打破[NodeList]属性'targets：'

Question

我正在尝试使用anime.js在SVG中为所有<rect>制作动画。

只要SVG是内联的，我就可以调用querySelectorAll()或getElementsByTagName()并将此节点列表作为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];},

如何在Edge / IE / Safari / Chrome中的外部SVG中将元素作为目标，以使用anime.js进行动画处理？

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,

但我不明白为什么这是必要的......