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

Question

我有一个在 Firefox 和 Chrome 中显示良好的 SVG，但在 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 的呈现方式:

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