如何将文本居中对齐在SVG圆形下方？

Question

假设我有以下SVG：

<g transform="translate(300, 300)">
    <circle r="5px"></circle>
    <text>My Label</text>
</g>

我需要标签居中显示在圆形下方。是否有简单的解决方案？

- user1405177

Answer 1

一个选项：

<g transform="translate(300, 300)">
    <circle r="5px"></circle>
    <text baseline-shift="-20px" text-anchor="middle">My Label</text>
</g>

-20像素取决于您的字体大小，也许有人有相对方法来进行下降，但是text-anchor="middle"将使文本居中。

- Jason Aller

---

这个很完美地工作。文本将是以像素定义的固定大小，因此不需要相对解决方案（尽管有这样的解决方案会很好）。谢谢。 - user1405177

你可以使用em单位根据字体大小给出一个值。我认为并不是所有的浏览器都支持baseline-shift，所以建议改用 y 或 dy 。在给定的示例中，应该使用 <text y="5" dy="1em" text-anchor="middle">My Label</text>，因为5是圆的半径，我们需要加上当前字体大小的偏移量才能使文本位于圆下方。 - Erik Dahlström

它是否考虑了缩放？在缩放时，文本和圆圈会分散。 - Daniil Iaitskov