[解決済み] SVG テキストの自動改行

質問

を表示させたいのですが <text> を SVG で表示したいのですが、コンテナの <rect> に自動改行されます。 <div> 要素を埋めるのと同じです。そのような方法はあるのでしょうか？私は、行を別々に配置するために <tspan> s.

どのように解決するのですか？

テキストラッピングは、現在実装されている仕様であるSVG1.1には含まれていません。

作成した SVG グラフィックを Web 上で使用する場合、SVG 内に HTML を埋め込むには <foreignObject/> 要素でHTMLを埋め込むことができます。例を挙げます。

<svg ...>

<switch>
<foreignObject x="20" y="90" width="150" height="200">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>

<text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

</svg>

HTML をサポートしない純粋な SVG レンダラをターゲットにしていたり、プロフェッショナルなベクターグラフィックス操作ソフトウェア (Adobe Illustrator, Inkscape, ...) を使ってグラフィックを編集したい場合、このソリューションはおそらくあなたに適していません。