如何在 SVG 矩形中放置文本并使其居中

我有以下矩形：

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

我想把“小说”这个词放在里面。对于其他矩形，SVG 是否会自动换行以保留在其中？我似乎找不到任何关于在水平和垂直居中的形状中插入文本以及自动换行的任何内容。另外，文本不能离开矩形。

看着https://www.w3.org/TR/SVG/text.html#TextElement示例没有帮助，因为文本元素的 x 和 y 与矩形的 x 和 y 不同。文本元素似乎没有宽度和高度。我不确定这里的数学。

（我的 HTML 表格无法正常工作。）

在 SVG 中水平和垂直居中文本的简单解决方案：

1. 将文本位置设置为绝对中心您想要将其居中的元素的位置：

   • 如果是家长，你可以这样做x="50%" y ="50%".
   • 如果是其他元素的话x将是x该元素的 + 其宽度的一半（与y但随着高度）。

2. Use the text-anchor属性使文本与值水平居中middle:

   middle

   所渲染的字符被对齐，使得所得到的所渲染文本的几何中间位于初始当前文本位置。

3. Use the 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;
}