将文本中心对齐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"会使文字居中。