基本図形 SVGで円を描く 3 テキスト表示

SVGで作成した円の中にテキストを描画していきます。

中央揃え

円の中心にテキストを表示します。

<circle cx="100" cy="100" r="100" fill="skyblue" />
<text x="100" y="100" text-anchor="middle" dominant-baseline="middle">文字</text>

START

1	<text>の座標円の中心座標（100,100）と同じにします。
2	水平方向の中央揃え text-anchor属性をmiddleにします。
3	垂直方向の中央揃え dominant-baseline属性をmiddleにします。

END

<text>を円の中心座標に配置しただけではテキストの中心と円の中心が同じにはならないので、text-anchor属性とdominant-baseline属性で位置を調整します。middle以外にも設定できる値はあるので以下の参照先を御確認下さい。