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