SVG内のテキストを中央揃えにする方法

テキストを切り抜いて背景動画を表示させる場合等、SVG内でテキストを扱うことがあると思います。その時にテキストを中央揃えにする方法をメモしておきます。

コード

HTML

テキスト位置を調整してあげます。

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

CSS

※HTML内に記述する場合は不要です。

svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

参考

How to place and center text in an SVG rectangle

ー この記事をシェアする? ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。