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

Question

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

<text ...>bar</text>

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

foobar

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

我尝试过使用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文本元素内容的宽度。

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

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

获取tspan的文本内容只是为我提供了tspan文本内容。 E.g。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;