javascript - 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”(非常小的字符)开头时，浏览器就会在第一行的末尾呈现该字符。它在用户界面上看起来像“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

既然您正在执行附加 tspan 的操作，为什么不直接使用 DOM 附加一个空格呢？

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