在 SVG 圆圈下方对齐文本中心？答案

【问题标题】：Align text center below a SVG circle?在 SVG 圆圈下方对齐文本中心？
【发布时间】：2014-02-19 17:59:47
【问题描述】：

假设我有以下 SVG：

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

我需要标签在圆圈下方居中。这个问题有简单的解决方案吗？

【问题讨论】：

标签： html svg

【解决方案1】：

一个选项：

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

-20px 取决于您的字体大小，也许有人有相对的放置方式，但 text-anchor="middle" 将使文本居中。

【讨论】：

这很完美。文本将以 px 为单位定义的恒定大小，因此不需要相对解决方案（尽管它会很好）。谢谢。
您可以使用em 单位根据字体大小给您一个值。我不认为所有浏览器都支持baseline-shift，所以我建议使用y 或dy。在给出的示例中，这将是 <text y="5" dy="1em" text-anchor="middle">My Label</text>，因为 5 是圆的半径，然后我们需要将其偏移当前的字体大小以使文本位于圆下方。
是否考虑缩放？放大时文字和圆圈分散。