svg - 使用文本 anchor : middle and alignment-baseline: middle/central 在 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>

Codepen

Answer 1

IE 不支持 alignment-baseline .实现您想要的最佳跨浏览器方式是使用 dy带小数的属性 em值(value)。

值约为 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>