Centering SVG text on IE11 with text-anchor: middle and alignment-baseline: middle / central

Question

I need to perfectly center a text element in an SVG using IE11.

Desired result (all Evergreen browsers):

IE11 result:

// SVG CODE:

<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
    <circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
    <text text-anchor="middle"
        alignment-baseline="central"
        font-size="75"
        font-family="Arial"
        x="50%" y="50%">1</text>
  </svg>

Codepen

Answer 1

IE doesn't support alignment-baseline. The best cross-browser way to achieve what you want is to use the dy attribute with a fractional em value.

A value of around dy="0.35" works for Arial.

<svg xmlns="http://www.w3.org/2000/svg" width=100% height="100%" viewBox="0 0 130 130">
  <circle fill="dodgerblue" cx="50%" cy="50%" r="65"></circle>
  <text text-anchor="middle"
        font-size="75"
        font-family="Arial"
        x="50%" y="50%" dy="0.35em">1</text>
</svg>