SVG的tspan的outerHTML替代方案

Question

我正在为SVG图像(v2.0)呈现多行文本。每个文本行都表示为一个tspan元素。我循环遍历所有tspan，并将它们作为新的子元素附加到一个文本元素(this.node)。

while (tSpans.length > 0) {
    var tSpan = tSpans.shift()
    this.node.appendChild(tSpan)
}

html输出是一个单独的字符串。

<svg ...>
    <text ...>
        <tspan ...>Long text</tspan>
        <tspan ...>in the tspan</tspan>
    </text>
</svg>

Firefox对空间的要求很严格。因此，只要下一行以"i“(非常小的字符)开头，浏览器就会在第一行的末尾呈现该字符。它看起来像UI上的"Long texti“。

我解决这个问题的想法是在tspan之间添加一个空白空间。以便Firefox呈现一个隐藏伪空白字符(Example whitespace-only text nodes at Firefox's Dev tools)

我尝试使用outerHTML属性来设置空格。它在开发工具(编辑HTML)中起作用。

<tspan ... />SPACE<tspan ... />

while (tSpans.length > 0) {
     var tSpan = tSpans.shift()

     console.log('before', tSpan.outerHTML)
     tSpan.outerHTML += ' '
     console.log('after', tSpan.outerHTML)

     this.node.appendChild(tSpan)
}

不幸的是，事实证明outerHTML似乎是只读的。有人知道为什么吗？有没有别的办法？

Answer 1

为什么不使用DOM附加一个空格呢?这就是您要做的附加tspan的操作。

while (tSpans.length > 0) {
    var tSpan = tSpans.shift()
    this.node.appendChild(tSpan)
    this.node.appendChild(document.createTextNode(" "));
}