如何在不更改其 textContent 值的情况下将字符附加到 SVG 文本元素？答案

【问题标题】：How to append characters to an SVG text element without changing its textContent value?如何在不更改其 textContent 值的情况下将字符附加到 SVG 文本元素？
【发布时间】：2015-12-26 06:17:48
【问题描述】：

我正在尝试将字符附加到与文本元素的文本内容值分开的 SVG 文本元素。字符需要出现在文本元素的前面，并且看起来像是单词的一部分，例如如果这是我的标签，

<text ...>bar</text>

然后我会将“foo”“附加”到它的前面，这样当它显示在浏览器中时，用户会看到：

foobar

但实际上元素的文本内容仍然只是“条”。

我尝试过使用 CSS ::before 和 ::after 伪元素，但这些似乎没有效果：

svg text::before
{
  content: "foo"
}

但是，它们对于非 SVG 元素非常有效：

li::before
{
  content: "foo"
}

如果这是不可能的，有没有办法让 SVG 文本元素之间的间距为零？例如

<text class="something" text-anchor="end" dy=".5ex" y="110.25" x="-15">foo</text>
<text style="display:block; float:left; padding: 1px;" class="something-else" text-anchor="end" dy=".5ex" y="110.25" x="-15" font-family="FontAwesome">bar</text>

出现时“foo”直接堆叠在“bar”之上。我可以通过目测来更改 x 坐标，但这真的很不方便，因为我无法控制任何一个 svg 文本元素内容的宽度。

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

听起来你想要一个 text/tspan 组合，例如

<text><tspan>foo</tspan>bar</text>

或

<text>foo<tspan>bar</tspan></text>

这将允许您以不同的方式设置 foo 和 bar 的样式，这似乎是您想要的。

你可以写

tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
text.appendChild(tspan);

将 tspan 添加到文本元素（假设您的文本元素位于名为 text 的变量中）。

获取 tspan 的文本内容只是为我获取 tspan 文本内容，正如人们所期望的那样。例如

alert(document.getElementById("tspan").textContent);

&lt;svg&gt;&lt;text&gt;foo&lt;tspan id="tspan"&gt;bar&lt;/tspan&gt;&lt;/text&gt;&lt;svg&gt;

【讨论】：

有没有办法可以将它动态添加到现有的 SVG 文本元素或使用 CSS？
谢谢。看起来如果我访问<tspan/> 文本内容，它实际上返回父<text/> 标记的文本内容。
您无法通过 CSS 向 SVG 添加其他内容，但您可以使用 javascript，正如我在更新的答案中所示。获取<tspan/> 文本内容只会在我运行它时得到我所期望的。我还更新了我的答案以表明这一点。如果您有更多问题，最好单独提出。