【SVG】SVGでtextタグ内の文字を中央寄せする方法

インラインのSVGタグ内でtext要素を用いる時、中央寄せする方法メモ。

※これらはテキストが一行で収まる場合。複数行の場合はJavascriptでtspanとかを生成して調整する。

基本となるSVG

これを基本に中央寄せをやってみる。

※SVGの領域は赤枠で囲っている。

<svg viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="0" y="30" font-size="30">中央</text>    
</svg>

左右の中央寄せ

text要素のxプロパティに “50%”という値を割り振るだけだと下記のようになってしまう。

<text x=”50%” y=”30″ font-size=”30″ >中央</text>

“text-anchor”プロパティに”middle”と当てると左右の中央寄せが実現できる。

<text x=”50%” y=”30″ text-anchor=”middle” font-size=”30″ >中央</text>

<svg viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="30" text-anchor="middle" font-size="30" >中央</text>    
</svg>

上下左右の中央寄せ

“Y”プロパティに”50%”という値を当てるだけだとやはり少しずれる。

“dominant-baseline”プロパティに “cantral”と当てると、上下の中央も実現できる。

<text x=”50%” y=”50%” text-anchor=”middle” dominant-baseline=”central” font-size=”30″ >中央</text>

<svg viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-size="30" >中央</text>    
</svg>

上下の中央

<svg viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="0" y="50%"  dominant-baseline="central" font-size="30" >中央</text>    
</svg>

参考
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor