文字（テキスト）を描画
SVGで文字（テキスト）を描画するには、text要素を使用します。
text要素は入れ子にすることはできません。
入れ子にする要素を指定したい場合はtspan要素を使用します。
詳しくは、text要素に子要素のテキストを描画ページをご覧ください。
- ※ 改行することはできません。
構文
<text> テキスト </text>text要素で囲われたテキストを表示します。
属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| x | 0 | X軸（水平軸）の座標（位置）。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
| y | 0 | Y軸（垂直軸）の座標（位置）。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
| dx | X軸（水平軸）の相対的な座標（位置）。 x属性の値を開始位置とする。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
|
| dy | Y軸（垂直軸）の相対的な座標（位置）。 y属性の値を開始位置とする。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
|
| rotate | 文字を1文字ずつ回転する。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
- ※ Y軸は文字のベースラインを基準とした座標（位置）で表示されることに注意してください。
サンプルコードとデモ
位置
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text y="14">あいうえお</text>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text x="10" dx="20" y="14">あいうえお</text>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text x="0,24,70" y="14">あいうえお</text>
</svg>回転
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text y="14" rotate="45">あいうえお</text>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text y="14" rotate="30,60,90">あいうえお</text>
</svg>