CODEWITHSUNDEEP
javascriptsvgtextelement
Christopher Gaston
Christopher Gaston

Reputation: 511

Is it possible to change the textContent value of an svg use element that is a clone of a text element?

I have an svg text element that I have cloned with the use element. Is there a way to change the text value of the use element clone so that it is different than the source element? I tried the following with no success. 

use2[i]=document.createElementNS(svgns, "use");
use2[i].setAttributeNS(xlinkns, "xlink:href", "#hsc");
use2[i].setAttribute("x", ((i+1)*45+45));
use2[i].setAttribute("y", "0");
use2[i].textContent=(useCount+3);
document.getElementById("redarrows").appendChild(use2[i]);

The browser dom explorer shows the use element to have a textContent of the useCount+3 value, but on the screen the use element still shows the textContnet of the source text element.

Here is the text element I am cloning.

<text id="hsc" x="52.5" y="137" font-family="'Utsaah'" font-size="21">1</text>

Upvotes: 0

Views: 561

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

No, <use> is just a view of the underlying content (the thing the <use> points to). It has no content DOM of its own.

If you create content within the <use> element it will be ignored as you have seen.

If you want to have different content then you can always clone and attach it yourself using element.cloneNode() but be careful not to create duplicate element ids.

Upvotes: 2

Related Questions