4D Japan Knowledge Base

SVG文書でテキストを改行するコード

SVG文書を作成する場合、キャリッジリターンを強制するには、<br />ではなく、<tbreak />要素で改行を指定する必要があります。

たとえば、次のようなSVG文書が作成されたとします。

<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="peachpuff" height="150" rx="0" ry="0" stroke="#777" stroke-width="3" width="210" x="5" y="5"/>
<textArea font-family="Georgia" font-size="25" font-style="italic" height="150" text-align="justify" width="200" x="10" y="10">First Line<br/>Second Line<br/>Third Line</textArea>
</svg>

<br />タグが使用されたため、次のようなピクチャが表示されます。改行が無視されている点に注目してください。

対照的に、次のSVG文書は<tbreak />タグを使用しています。

<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="peachpuff" height="150" rx="0" ry="0" stroke="#777" stroke-width="3" width="210" x="5" y="5"/>
<textArea font-family="Georgia" font-size="25" font-style="italic" height="150" text-align="justify" width="200" x="10" y="10">First Line<tbreak/>Second Line<tbreak/>Third Line</textArea>
</svg>

今度は改行が正しく反映されたピクチャが表示されました。