在IE11中使用text-anchor与alignment-baseline实现SVG文本完美居中

嘿，我刚好踩过IE11 SVG文本居中的坑，给你几个亲测有效的解决办法，适配IE11的同时也不影响现代浏览器的表现：

方法1：替换dominant-baseline为兼容属性 #

现代浏览器常用dominant-baseline: middle实现垂直居中，但IE11完全不识别这个属性。你可以改用alignment-baseline: middle，搭配text-anchor: middle实现水平居中，同时把文本的x和y值设为SVG容器的中心坐标：

<svg width="200" height="200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <text x="100" y="100" text-anchor="middle" alignment-baseline="middle">完美居中文本</text>
</svg>

方法2：用dy属性微调垂直偏移 #

如果方法1的垂直居中还是有偏差，给文本加上dy=".35em"属性来补偿IE11的渲染误差——这个值是适配大多数字体的经验值，你可以根据实际字体微调：

<svg width="200" height="200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <text x="100" y="100" text-anchor="middle" dy=".35em">完美居中文本</text>
</svg>

方法3：用<tspan>包裹实现精准控制 #

针对多行文本或复杂排版场景，把文本放在<tspan>标签里，通过baseline-shift属性强制控制基线位置，能进一步提升兼容性：

<svg width="200" height="200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <text x="100" y="100" text-anchor="middle">
    <tspan baseline-shift="middle">第一行居中</tspan>
    <tspan x="100" dy="1.2em">第二行文本</tspan>
  </text>
</svg>

方法4：transform兜底方案（终极兼容） #

如果以上CSS属性都不生效，直接用SVG的transform属性手动平移。把文本的x和y设为0，再通过translate移到容器中心，搭配dy微调：

<svg width="200" height="200">
  <rect width="200" height="200" fill="#f0f0f0" />
  <text x="0" y="0" transform="translate(100, 100)" text-anchor="middle" dy=".35em">完美居中文本</text>
</svg>

实际开发中，方法1+方法2的组合基本能解决绝大多数IE11的SVG文本居中问题，你可以根据自己的SVG结构灵活调整。

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