Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
基本図形 SVGで四角形を描く 3 テキスト表示
SVGで作成した長方形の中にテキストを描画します。
中央揃え
<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100" stroke="black" fill="none"/>
<text x="100" y="50" text-anchor="middle" dominant-baseline="middle">text</text>
</svg>
テキストの配置方法
START
|
1
|
<text>の座標 |
|
2
|
水平方向の中央揃え |
|
3
|
垂直方向の中央揃え |
END
<text>を円の中心座標に配置しただけではテキストの中心と円の中心が同じにはならないので、text-anchor属性とdominant-baseline属性で位置を調整します。middle以外にも設定できる値はあるので以下の参照先を御確認下さい。