<svg>要素に、テキストを書くことが出来ます。
既にご紹介した「svg要素(2) 色とスタイル」や「svg要素(3) グラデーション」などと組み合わせることで視覚効果を施したテキストを表現することも可能です。
また<svg>要素は、<canvas>要素と異なり、要素中にテキストを定義しますので、SEOに対しても有効となります。
テキストを配置します。
テキストの配置は、<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>
コーディング例
フォントのサイズや形状などを指定することが出来ます。
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>
コーディング例
寄せ位置を指定することが出来ます。
※その他のプレゼンテーション属性(行揃え位置や縦書きなど)もW3Cでは定義されていますが、対応するブラウザがほとんどありません。
- text-anchor属性
-
寄せ位置を指定します。
値は "start"(左寄せ)、 "end"(右寄せ)、 "middle"(中央寄せ)の三種です。
リスト3. 位置の指定
コーディング例