[解決済み】SVGの矩形にテキストを配置し、中央に配置する方法

質問

次のような矩形があります。

<rect x="0px" y="0px" width="60px" height="20px"/>

Fiction"という単語を中央に配置したいのですが、可能でしょうか？他の矩形の場合、SVGのワードはその中に収まるように折り返されるのでしょうか？水平・垂直方向にセンタリングされたシェイプの中にテキストを挿入し、ワードラップすることについては、特に何も書かれていないようです。また、テキストは矩形から離れることができません。

を見てみると https://www.w3.org/TR/SVG/text.html#TextElement テキスト要素の x と y は矩形の x と y と異なるので、この例は役に立ちません。テキスト要素には幅と高さがないようです。この辺の計算がよくわからないのです。

(私のHTML表はどうしてもうまくいきません)

解決方法は？

SVGでテキストを水平方向と垂直方向にセンタリングする簡単な方法です。

1. テキストの位置を 絶対中心 を中央揃えにします。

• 親であれば、そのまま x="50%" y ="50%" .
• 他の要素であれば x は、その x の場合、その要素の幅の半分を加えたものになります（同様に y ただし、高さを含む)。

1. を使用します。 text-anchor プロパティを使用して、テキストを水平方向にセンタリングします。 middle :

中

レンダリングされた文字は、レンダリングされたテキストの幾何学的な中央が、最初の現在のテキスト位置になるように整列されます。

1. を使用します。 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>

また、多くの要素に適用したい場合は、CSSで使用することができます。例えば

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