如何在不改变SVG文本元素的textContent值的情况下向其追加字符？

Question

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

<text ...>bar</text>

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

foobar

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

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

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文本元素内容的宽度。

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

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

<svg><text>foo<tspan id="tspan">bar</tspan></text><svg>