Javascript 如何将字符附加到SVG文本元素而不更改其textContent值？

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

<text ...>bar</text>

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

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

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

但是，对于非SVG元素，它们工作得非常好：

li::before
{
  content: "foo"
}

如果不可能，是否有一种方法允许SVG文本元素之间的间距为零？e、 g

<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
酒吧

---

显示为“foo”直接堆叠在“bar”的顶部。我可以通过目测来更改x坐标，但这确实不方便，因为我无法控制svg文本元素内容的宽度

听起来您需要文本/t平移组合，例如

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

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

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

警报（document.getElementById（“tspan”）.textContent）
foobar
是否有一种方法可以将此动态添加到现有SVG文本元素或使用CSS？谢谢。看起来，如果我访问
文本内容，它实际上会返回父
标记的文本内容。您不能通过CSS向SVG添加其他内容，但可以使用javascript，正如我在更新的答案中所示。获取
文本内容只会在运行时获得我所期望的内容。我也更新了我的答案来说明这一点。如果你有更多的问题，最好分开问。
<text><tspan>foo</tspan>bar</text>

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

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