SVG tspan的externalHTML替代

Question

I'm rendering multiple lines of the text for an SVG image (v2.0). Each text line is represented as one tspan element. I loop over all tspans and append them as new children to a text element (this.node).

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

The html output is one single string.

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

Firefox is strict regarding the spaces. So, whenever the next line starts with an "i" (very small char), the browser renders this char at the end of the first line. It looks like "Long texti" at the UI.

My idea to fix this was to add an empty space in between the tspans. So that Firefox renders a hidden pseudo whitespace character ( Example whitespace-only text nodes at Firefox's Dev tools )

I tried to use the outerHTML property to set a blank space. It's working at dev tools (Edit 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)
}

Sadly, it turns out that outerHTML seems to be read-only. Does somebody know why? Is there an alternative way?

Answer 1

Why not just append a space using the DOM given that's what you're doing to append tspans?

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