I'd like to place a single character, perfectly centered, inside this circle:
<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>
Ideally, the solution works for any single ASCII character.
Thanks for the help!
Use a combination of text-anchor="middle" to centre the text horizontally, and dominant-baseline="central" to centre it vertically.
To simplify things, I've added a transform attribute to your <g> element to move the origin to the middle of your canvas.
<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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments