text要素に子要素のテキストを描画
SVGでtext要素に子要素のテキストを描画するには、tspan要素を使用します。
構文
<tspan>テキスト</tspan>tspan要素で囲われたテキストを表示します。
属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| x | 0 | X軸（水平軸）の座標（位置）。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
| y | 0 | Y軸（垂直軸）の座標（位置）。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
| dx | X軸（水平軸）の相対的な座標（位置）。 x属性の値を開始位置とする。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
|
| dy | Y軸（垂直軸）の相対的な座標（位置）。 y属性の値を開始位置とする。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
|
| rotate | 文字を1文字ずつ回転する。 カンマ区切りで指定することで1文字ずつ指定することが可能。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200" height="50">
<text y="14">あいうえお<tspan>かきくけこ</tspan></text>
</svg>