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

Question

我正在嘗試將字符附加到與文本元素的文本內容值分開的 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 文本元素內容的寬度。

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 文本內容。 例如

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

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