SVG tspan的externalHTML替代

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”（非常小的字符）开头，浏览器都会在第一行的末尾呈现此字符。 在用户界面上看起来像“长文本”。

我要解决此问题的想法是在tspan之间添加一个空白区域。 以便Firefox呈现隐藏的伪空白字符（ Firefox的Dev工具中的仅空白文本节点示例 ）

我试图使用externalHTML属性设置空白。 它正在开发工具（编辑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

考虑到要添加tspans，您为什么不使用DOM附加空格？

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