SVG圆形内文字居中异常：Chrome正常，Mac Finder及React Native偏移

我需要实现一个内部带有居中字母的简易SVG圆形。该SVG在Chrome浏览器中显示正常，但在Mac Finder以及最终的React Native应用里，文字呈现未居中状态。我已查阅多个相关问题，测试了多种text-anchor与dominant-baseline属性，仍未得到确切解决方案。

相关SVG代码如下：

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

Chrome中的显示效果：

应用中的显示效果：

内容的提问来源于stack exchange，提问作者Koitt