SVG の長方形内にテキストを配置して中央に配置する方法 質問する

SVG でテキストを水平方向と垂直方向に中央揃えする簡単なソリューション:

1. テキストの位置を、中央に配置する要素の絶対中心に設定します。

   • 親の場合は、 を実行するだけですx="50%" y ="50%"。
   • 別の要素の場合は、その要素の ＋ その幅の半分xになります( の場合も同様ですが、高さも同様です)。xy

2. 使用text-anchorテキストを水平方向に中央揃えにするプロパティの値middle:

   真ん中

   レンダリングされた文字は、結果として得られるレンダリングされたテキストの幾何学的中心が初期の現在のテキスト位置にくるように配置されます。

3. 使用dominant-baselineプロパティを使用して、テキストを垂直方向に中央揃えにしますmiddle（または、どのように見せたいかに応じて、次のようにすることもできますcentral）。

ここに簡単なデモがあります:

<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>

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