为何我的SVG文本在Microsoft Edge中无法垂直居中？

我之前也碰到过Edge对SVG文本基线处理不一致的情况，咱们来一步步修复你的代码。

首先，你的SVG在Chrome和Firefox显示正常，但Edge出问题，核心原因是Edge的SVG渲染引擎对alignment-baseline和dominant-baseline的组合支持有兼容性偏差，同时设置这两个属性时，Edge可能会忽略其中一个，导致文本偏移。

方案1：简化基线属性+微调dy #

保留最可靠的dominant-baseline="middle"，移除alignment-baseline，如果还有细微偏移，用dy属性微调（不同字体的基线位置略有差异）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" />
  <text font-size="32px" dominant-baseline="middle" text-anchor="middle" fill="#fff" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="32" dy="0.1em">dev</text>
</svg>

方案2：用transform实现绝对居中（更稳定） #

这种方法不受字体和基线属性的影响，兼容性更好：
将文本的y设为SVG的垂直中心（50%），然后通过transform: translateY(-50%)把文本自身的中心对齐到这个位置：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#ff0000" x="0" y="0" width="64" height="64" rx="8" ry="8" />
  <text font-size="32px" text-anchor="middle" fill="#fff" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="50%" transform="translate(0, -50%)">dev</text>
</svg>

为什么原代码不行？ #

原代码同时设置了alignment-baseline="middle"和dominant-baseline="center"，这两个属性在部分浏览器（尤其是Edge）中会产生冲突，导致基线计算错误。另外，dominant-baseline="center"的行为在不同浏览器中也有细微差异，换成middle或者用transform方法会更稳定。

内容的提问来源于stack exchange，提问作者José Salgado