トップページ >  HTML5 >  svg要素(5) テキスト
初版2011/08/07: 最終更新日2011/08/07
svg要素(5) テキスト
目次
テキストを書く
テキストを配置する
フォントを指定する
位置を指定する
テキストを書く

<svg>要素に、テキストを書くことが出来ます。
既にご紹介した「svg要素(2) 色とスタイル」や「svg要素(3) グラデーション」などと組み合わせることで視覚効果を施したテキストを表現することも可能です。
また<svg>要素は、<canvas>要素と異なり、要素中にテキストを定義しますので、SEOに対しても有効となります。

This is TEXT.
テキストを配置する

テキストを配置します。
テキストの配置は、<text>要素を用いて、配置することができます。
また、<tspan>要素を含めることで、<text>要素の特定テキストのみに変化を加えることができます。

なお、描画位置はテキストの左側ベースラインを軸に描画されます。
※左上ではなく、ベースラインであることに注意

x属性
書き始め(カレントポジション)の水平位置を絶対距離で指定します。
カンマまたは空白区切りで複数指定した場合、各文字(グリフ)毎に位置を指定できます。
y属性
書き出し(カレントポジション)のベースライン位置を絶対距離で指定します。
カンマまたは空白区切りで複数指定した場合、各文字(グリフ)毎に位置を指定できます。
dx属性
書き始め(カレントポジション)の水平位置を相対距離で指定します。
カンマまたは空白区切りで複数指定した場合、各文字(グリフ)毎に位置を指定できます。
dy属性
書き出し(カレントポジション)のベースラインの位置を相対距離で指定します。
カンマまたは空白区切りで複数指定した場合、各文字(グリフ)毎に位置を指定できます。
rotate属性
テキストの傾き(ラジアン)を指定します。
カンマまたは空白区切りで複数指定した場合、各文字(グリフ)毎に傾きを指定できます。
texLength属性

リスト1. テキストの配置方法

<text x="10" y="40" stroke="red">
	書き出し位置を(10,40)として
</text>
<text x="10" y="90" dy="0 -5 5 5 -5 -5 5 5 -5 -5" stroke="green" >
	文字毎に座標を指定
</text>
<text x="10" y="140" rotate="-10 0 -10 0 10 0 10" stroke="blue" >
	傾きをつける
</text>

コーディング例

書き出し位置を(10,40)として 文字毎に座標を指定 傾きをつける
フォントを指定する

フォントのサイズや形状などを指定することが出来ます。
CSS3のfontプロパティに対応します。(WEBフォントも対応可)

font属性
CSSのfontプロパティと同様の指定(スタイル・サイズ・種類)が可能です。
font-sizeなど、各プロパティ毎にも指定可能です。

リスト2. フォントの指定

<text x="10" y="30" stroke="red" font-size="28" >
	フォントサイズを28に
</text>
<text x="10" y="70" stroke="green" font-family="MS 明朝" >
	フォントファミリをMS 明朝に
</text>
<text x="10" y="140" stroke="blue" font-style="italic" >
	italic font
</text>

コーディング例

フォントサイズを28に フォントファミリをMS 明朝に italic font
位置を指定する

寄せ位置を指定することが出来ます。
※その他のプレゼンテーション属性(行揃え位置や縦書きなど)もW3Cでは定義されていますが、対応するブラウザがほとんどありません。

text-anchor属性
寄せ位置を指定します。
値は "start"(左寄せ)、 "end"(右寄せ)、 "middle"(中央寄せ)の三種です。

リスト3. 位置の指定


							

コーディング例

start end middle