为什么我的 SVG 文本在 Microsoft Edge 中没有垂直居中？答案

【问题标题】：Why isn't my SVG text centered vertically in Microsoft Edge?为什么我的 SVG 文本在 Microsoft Edge 中没有垂直居中？
【发布时间】：2019-07-21 01:28:02
【问题描述】：

我有一个 SVG 可以在 Firefox 和 Chrome 中很好地呈现，但在 Edge 中，文本不会垂直居中。

<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" alignment-baseline="middle" dominant-baseline="center" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="32">
           dev
       </text>
    </svg>

这就是它呈现出来时的样子：

这就是 Edge 的呈现方式：

【问题讨论】：

标签： css svg cross-browser microsoft-edge

【解决方案1】：

这是你可以做的：你保留alignment-baseline="baseline"。这在 Edge 上正常工作。然后你用dy = font-size/4 偏移y 上的文字

我还从您的代码中删除了 lengthAdjust="spacingAndGlyphs" textLength="85%"，因为这会使 Edge 中的文本向右偏移。

svg{width:90vh;}

<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" dy="8" dominant-baseline="baseline" text-anchor="middle" fill="#fff"   x="32" y="32">dev</text>
    </svg>

【讨论】：

嗯，它适用于边缘，但不适用于 chrome 和 mozilla

【解决方案2】：

为了获得最可靠的跨浏览器行为，您应该考虑完全不使用x-baseline 属性。相反，将文本基线准确定位在您想要的位置。

例如：

<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" fill="#fff" text-anchor="middle" lengthAdjust="spacingAndGlyphs" textLength="85%" x="32" y="39">
           dev
       </text>
    </svg>

【讨论】：