如何在 SVG 中居中文本 - HTML

在 SVG 中，居中文本可能会有些棘手。在本文中，我们将介绍几种方法来在 SVG 中居中文本。

使用属性x和y

SVG 中的文本元素具有属性x和y，可以使用这些属性将文本居中。将x和y属性都设置为50%即可实现居中。

<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="lightblue" />
  <text x="50%" y="50%" text-anchor="middle" fill="white">居中文本</text>   
</svg>

在上面的代码中，我们创建了一个SVG矩形，并在其中添加了文本。text-anchor属性设置为middle，将文本放置在中心。

使用transform属性

还可以使用SVG中的变换属性来居中文本。我们可以将文本元素的transform属性设置为translate函数。translate函数的参数将元素在x和y轴上移动。通过将x和y轴上的移动距离设置为元素的一半，即可将元素居中。

<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="lightblue" />
  <text x="0" y="0" fill="white" transform="translate(50%, 50%)">居中文本</text>  
</svg>

使用tspan元素

在SVG中，文本可以包含多个跨越多行的子文本元素。我们可以使用一个名为tspan的子元素，将它放置在文本元素中，然后将tspan元素的文本设置为居中文本。通过将tspan元素的x和y属性都设置为50%即可将文本居中。

<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="lightblue" />
  <text x="0" y="0" fill="white">
    <tspan x="50%" y="50%" text-anchor="middle">居中文本</tspan>
  </text>  
</svg>

结论

在 SVG 中居中文本可以使用多种方法。上面介绍的三种方法都能够很好地实现这个目标。可以根据具体情况选择其中的一种方法来居中文本。