SVGで改行を含んだ文字列を表示する方法

SVGタグ内で改行を含んだ文字列の表示方法についてのメモです。

SVGでは改行を表示することができません。foreignObjectタグでHTML要素を使えたら非常に簡単に実装できるのですが、前回の記事で書いたようにforeignObjectタグはChrome以外では使えないので、改行を表示するためには行毎に要素を作成するしかないようです。

以下は動作確認用のコードになります。

<svg width="300" height="200">
    <text font-size="15" x="10" y="10">
        <tspan x="10" y="30">１行目</tspan>
        <tspan x="20" y="50">２行目</tspan>
        <tspan x="30" y="70">３行目</tspan>
    </text>
    <g font-size="15">
        <text x="40" y="150">４行目</text>
        <text x="50" y="170">５行目</text>
        <text x="60" y="190">６行目</text>
    </g>
</svg>

• 【D3.js】text要素で手っ取り早く改行する方法２種。 – GUNMA GIS GEEK