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(" "));
}