在IE11上将SVG文本居中，文本锚定：中间和对齐基线：中间/中央

Question

我需要使用IE11在SVG中将文本元素完美居中。

所需结果（所有Evergreen浏览器）：

IE11结果：

// SVG代码：

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

码笔

Answer 1

IE不支持alignment-baseline。实现所需目标的最佳跨浏览器方法是使用dy带小em数值的属性。

dy="0.35"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>