javascript - 如何在不更改 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

听起来您想要文本/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 的变量中)。

Getting the text content of the tspan 正如人们所期望的那样，对我来说只是获取了tspan文本内容。例如

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

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