svg

SVG with centered text inside circle

I'm trying to have a simple circle with a letter centered inside. When I open the SVG in Chrome it looks fine but in the Mac Finder (and in the final React Native app) it looks uncentered. I've checked multiple questions here and still haven't gotten to a definitive answer, tested with multiple text-anchors and dominant-baselines

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <title>Icon A</title>
  <circle cx="50" cy="50" r="45" fill="none" stroke="black" stroke-width="4" />
  <text x="50" y="50"
        font-family="sans-serif"
        font-size="50"
        font-weight="bold"
        fill="black"
        text-anchor="middle"
        dominant-baseline="central">A</text>
</svg>

How it looks in chrome

enter image description here

How it looks in the app

enter image description here

Solution

  • Positioning text can also be done with an extra <path>

    <svg viewbox="0 0 100 100" style="width:160px">
  <circle cx="50%" cy="50%" r="50%" fill="green" stroke-width="4"/>
  <path id="P" pathLength="100" d="M0 50h100" stroke="white"/>
  <text>
    <textPath href="#P" 
              startoffset="50" text-anchor="middle" dominant-baseline="middle"
              fill="gold" font-family="arial" font-size="75px">A</textPath>
  </text>
</svg>

    Can be slimmed down:

    Setting the path attribute on textPath does not work on all browsers