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?

score 5 · Accepted Answer · answered Feb 19 '14 at 18:15

5

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.

answered Feb 19 '14 at 18:15

Jason Aller

This works perfect. The text will be a constant size defined in px, so a relative solution (although it would be nice) is not required. Thank you. – user1405177 Feb 19 '14 at 18:23
3

You can use the `em` unit to give you a value based on the font-size. I don't think `baseline-shift` is supported in all browsers so I'd recommend using `y` or `dy` instead. In the example given this would be `My Label`, since 5 is the radius of the circle, which we then need to offset by the current font-size to get the text to be under the circle. – Erik Dahlström Feb 20 '14 at 12:14
Does it take zooming into account? Text and circle disperse on zoom in. – Daniil Iaitskov Jul 30 '15 at 16:09

1 Answers1