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

Question

我有以下矩形:

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

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

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

(我的 HTML 表格无法正常工作。)

Answer 1

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

1. 将文本位置设置为要使其居中的元素的绝对中心:

   • 如果是父级，您只需执行 x="50%"y ="50%" 即可。
   • 如果是另一个元素，x 将是该元素的 x + 其宽度的一半(与 y 类似，但高度为)。

2. 使用text-anchor属性将文本水平居中，值为 middle:

   middle

   The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position.

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>

如果您想将其应用于许多元素，您也可以将其与 CSS 一起使用。例如:

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