是否可以更改作为文本元素克隆的 svg use 元素的 textContent 值？答案

【问题标题】：Is it possible to change the textContent value of an svg use element that is a clone of a text element?是否可以更改作为文本元素克隆的 svg use 元素的 textContent 值？
【发布时间】：2014-06-14 06:34:25
【问题描述】：

我有一个使用 use 元素克隆的 svg 文本元素。有没有办法改变使用元素克隆的文本值，使其与源元素不同？我尝试了以下但没有成功。

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

浏览器 dom explorer 显示 use 元素的 textContent 值为 useCount+3，但在屏幕上 use 元素仍显示源文本元素的 textContnet。

这是我要克隆的文本元素。

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

【问题讨论】：

标签： javascript svg text element

【解决方案1】：

不，<use> 只是底层内容的视图（<use> 指向的东西）。它没有自己的内容 DOM。

如果您在 <use> 元素中创建内容，如您所见，它将被忽略。

如果您想拥有不同的内容，您可以随时使用element.cloneNode() 自行克隆并附加它，但请注意不要创建重复的元素 ID。

【讨论】：

cloneNode 运行良好。创建克隆后，我删除了 id 属性use2[i]=document.getElementById("hsc").cloneNode(); use2[i].removeAttribute("id");