SVGのtspanの代わりにouterHTML

Question

私はSVGイメージ（v2.0）のテキストを複数行表示しています。各テキスト行は1つのtspan要素として表されます。私はすべてのtspansをループし、それらを新しい子としてテキスト要素（this.node）に追加します。

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

html出力は1つの文字列です。

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

Firefoxはスペースに関して厳しいです。したがって、次の行が "i"（非常に小さい文字）で始まると、ブラウザは最初の行の最後にこの文字をレンダリングします。 UIで「Long texti」のように見えます。

これを修正する私の考えは、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(" ")); 
}