SVG的tspan

Question

我正在为SVG图像（v2.0）渲染多行文本。每个文本行表示为一个tspan元素。我遍历所有tspans并将它们作为新子项附加到文本元素（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中的“长文本”。

我想解决这个问题的方法是在tspans之间添加一个空白区域。这样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附加空格，因为你正在做什么来附加tspans？

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