スポンサーリンク
スポンサーリンク

文字を描画する

SVGで文字を表示するにはtext要素を使います。<text>とと</text>の
間に表示する文字列を書きます。ただ、このままでは文字は表示
されません。文字を表示するには、文字の色(又はは線の色)を指定
しなかればなりません。

サンプルコードの実行結果はこちら

フォントや文字の大きさ、太さを指定する

text要素には、書体やサイズを指定することができます。
主なものは下記の通りです。値・内容はCSSと同じです。

属性 説明
font-family 書体
font-size 文字サイズ
font-weight 太字の太さ

文字の表示基準位置を変更する

text要素には文字の表示基準位置を指定するtext-anchor属性があります。
これは文字の左揃え、中央、右揃えを指定するものです。
text-anchorの属性値は下記の通りです。

属性値 説明
start 左揃え
middle 中央
end 右揃え

コメント

タイトルとURLをコピーしました