2020-01-07 更新

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">1行目</tspan>
        <tspan x="20" y="50">2行目</tspan>
        <tspan x="30" y="70">3行目</tspan>
    </text>
    <g font-size="15">
        <text x="40" y="150">4行目</text>
        <text x="50" y="170">5行目</text>
        <text x="60" y="190">6行目</text>
    </g>
</svg>

動作確認

1行目 2行目 3行目 4行目 5行目 6行目

参考リンク

HTML】関連記事