доступ к внутреннему содержимому экземпляров символов в SVG

Question

У меня есть документ SVG, который содержит 4 экземпляра символа.Я хочу манипулировать атрибутами в каждом экземпляре отдельно.Например, изменяет текст некоторых надписей, меняет цвет фигуры, перемещает внутреннюю фигуру.

Это кажется невозможным, поскольку список узлов элемента SVGUseElement пуст.

Мне кажется, что нужно рекурсивно распаковать содержимое каждого символа в новый документ.

Есть мысли?

Спасибо!

Answer 1

Символ - это вид, а не копия оригинала. Измените оригинал, и все виды (символы) будут изменены. Похоже, вы хотите клонировать узлы и манипулировать клонами, а не использовать символы.

var copy = element.cloneNode(true); создаст копию элемента и его дочерних элементов.

Затем вы можете использовать вещи в клоне, ссылаясь на них с помощью переменной копирования.

Answer 2

Это не ответ, но может быть полезным.

Я также пытаюсь получить доступ к внутреннему содержимому группировки символов, чтобы, например, изменить местоположение или цвет элемента в одном экземпляре.Работая в Chrome, если вы определяете символ, то вы можете получить доступ к свойствам элементов в экземпляре символа с помощью чего-то вроде:

<defs>
<symbol id="what" ... >
</defs>

<use id="what1" xlink:href="#what" ... >

...

<script>
useobj = document.getElementById("what1");
innerobj = useobj.instanceRoot.firstChild.correspondingElement;
innerobj.x1.baseVal.value = 100;

Однако это меняет все экземпляры.Я попробовал это:

useobj = document.getElementById("what1").cloneNode(true)

, но все равно изменились все экземпляры.Я предполагаю, что instanceRoot является ссылкой, поэтому клонирование просто копирует указатель (поверхностное копирование).