anime.js querySelectorAll() во внешнем SVG разрывает [список узлов] для атрибута 'targets:'

#svg #external #nodelist #anime.js

#svg #внешний #список узлов #anime.js

Вопрос:

Я пытаюсь анимировать все <rect> внутри SVG с помощью anime.js.

Пока 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];},

Как я могу анимировать элементы в качестве целевых объектов во внешнем SVG в Edge / IE / Safari / Chrome с помощью anime.js ?

1. Пожалуйста, также включите код, который показывает это поведение, и всю необходимую информацию для его воспроизведения, в идеале минимальный рабочий тестовый пример (например, для некоторых SVG Википедии как «внешних»). Вы также можете использовать функцию фрагмента кода в редакторе вопросов (работает как jsfiddle) для создания примера кода, пригодного для выполнения.

2. Только IE / Edge? Вы пробовали какой-либо другой браузер?

3. @RobertLongson … о, как я вижу, это работает только в Firefox. Также не работает в Chrome и Safari…

Ответ №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,

Но я не понимаю, зачем это необходимо…

1. Не могли бы вы, пожалуйста, также поделиться своим html-кодом, чтобы я мог воспроизвести вашу проблему и найти причину?

2. @JeniferJiang рабочий пример со встроенным svg: jsfiddle.net/hirschferkel/xy5mb3kp/3

3. @JeniferJiang сохраняйте svg-код таким, какой он есть во внешнем файле, и используйте этот нерабочий пример кода: jsfiddle.net/hirschferkel/xy5mb3kp/12

4. @JeniferJiang в любом случае, это ошибка в anime.js поскольку есть еще несколько, связанных с внешним svg.