2

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!

asinning
  • 21
  • 1

2 Answers2

2

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • That would be great, but we are hoping to develop a work-flow which will allow the designer to layout the GUI in Illustrator, output to SVG, and then write a view-object around the SVG layer. The designer would be the one making the copies of the symbol. In case you haven't already guessed, we're attempting to change our development process from Flash to HTML5. – asinning Feb 05 '12 at 15:59
  • 2
    But symbols aren't copies they are just views of the original. If you want a copy you need to make one. – Robert Longson Feb 05 '12 at 16:16
  • @asinning So let your designer use Symbols, but as necessary use JavaScript to 'explode' a symbol into a full-fledged copy as Robert suggests here. – Phrogz Feb 06 '12 at 14:08
0

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).

Lex Lindsey
  • 521
  • 4
  • 4