Align text center below a SVG circle?

html, svg

Solution

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.

Problem

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?

Original source