Выровнять текстовый центр ниже круга 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" центрирует текст.