anime.js 外部 SVG 中的 querySelectorAll() 中断属性 'targets:' 的 [NodeList]

Question

我正在尝试使用 anime.js.

为 SVG 中的所有 <rect> 设置动画

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

elements = document.querySelectorAll("rect");

里面的动漫代码

targets: elements,

BUT：当我link将相同的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,

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

anime.js 外部 SVG 中的 querySelectorAll() 中断属性 'targets:' 的 [NodeList]

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

svg

external

nodelist

anime.js