我有一个在 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 的呈现方式:
最佳答案
这是您可以做的:您保持 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>
关于css - 为什么我的 SVG 文本在 Microsoft Edge 中没有垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54903544/