我如何完美地將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"使其居中居中。

爲了簡化，我爲您的<g>元素添加了transform屬性，以將原點移動到畫布中間。

<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>