为什么我的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上可以正常工作。然后，用y

偏移dy = font-size/4上的文本

我还从您的代码中删除了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>

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