html - 对齐 SVG 圆下方的文本中心？

Question

假设我有以下 SVG:

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

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

Answer 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" 将使文本居中。