access inner contents of symbol instances within svg

Question

I have an svg document that contains 4 instances of a symbol. I want to manipulate attributes within each instance separately. E.g. changes the text of some labels, change the color of a shape, move an internal shape.

This doesn't seem possible, because node list of a "SVGUseElement" is empty.

It seems to me that one would need to recursively unpack the content of each symbol into a new document.

Any thoughts?

Thanks!

Answer 1

A symbol is a view rather than a copy of the original. Change the original and all the views(symbols) will change. Sounds like you want to clone the nodes and manipulate the clones rather than using symbols.

var copy = element.cloneNode(true); will create a copy of element and its children.

Then you can things in the clone by referencing them using the copy variable.

Answer 2

This is not an answer but may be helpful.

I am also trying to access the inner contents of a symbol grouping in order to e.g. change the location or color of an element in one instance. Working in Chrome, if you define a symbol, then it, you can access the properties of elements inside an instance of the symbol by something like:

<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;

However, this changes all instances. I tried this:

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

but it still changed all instances. I infer that instanceRoot is a reference, so cloning just copies the pointer (shallow copy).