Align text center below a SVG circle?

Question

Suppose I have the following SVG:

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

I need the label to be centered below the circle. Is there a simple solution to this problem?

Answer 1

One option:

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

The -20px depends on your font size, and maybe someone has a relative way of doing the drop, but the text-anchor="middle" will center the text.