Как я могу полностью сосредоточить один символ внутри круга SVG?

Question

Я хотел бы поместить один символ, совершенно по центру, внутри этого круга:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100" height="100"> 
    <g> 
    <circle style="fill:#eeeeee" cx="50" cy="50" r="50"> 
    </circle> 
    <text>C</text> 
    </g> 
</svg> 

В идеале, решение работает для любого одиночного ASCII символа.

Спасибо за помощь!

Answer 1

Используйте комбинацию из text-anchor="middle", чтобы центрировать текст по горизонтали, и dominant-baseline="central", чтобы центрировать его по вертикали.

Чтобы упростить ситуацию, я добавил атрибут transform к вашему элементу <g>, чтобы переместить начало координат в середину вашего холста.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> 
 
    <g transform="translate(50,50)"> 
 
    <circle style="fill:#eeeeee" r="50" /> 
 
    <text text-anchor="middle" dominant-baseline="central">C</text> 
 
    </g> 
 
</svg>