В чем проблема с Edge !? В Chrome выравнивание текста хорошее, но в краю оно не работает. Просто используйте код ниже и сохраните его в файл. Откройте его с помощью Edge и chrome, чтобы увидеть разницу.
Есть идеи?
<!DOCTYPE html>
<html>
<body>
<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'>
<circle stroke='#FFF' fill='white' cx='24' cy='24' r='22' opacity='0.6' stroke-width='2'/>
<circle stroke='#FFF' fill='red' cx='24' cy='24' r='15' stroke-width='2'/>
<circle stroke='#FFF' fill='blue' cx='24' cy='24' r='13' stroke-width='3' stroke-opacity='0.4'/>
<text x='24' y='24' font-size='10pt' font-family='arial' font-weight='bold' alignment-baseline='middle' text-anchor='middle' fill='#FFF'>9</text>
</svg>
</body>
</html>