anime.js querySelectorAll () во внешних разрывах SVG [NodeList] для атрибута 'target:' - PullRequest
Новая
       46

anime.js querySelectorAll () во внешних разрывах SVG [NodeList] для атрибута 'target:'

0 голосов
/ 03 марта 2019

Я пытаюсь анимировать все <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 Ответ

0 голосов
/ 03 марта 2019

Таким образом, единственный обходной путь для 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,

Но я не понимаюзачем это нужно ...

...