跨浏览器 SVG 文本基线对齐

Question

这是在 Chrome 浏览器中呈现 SVG 文本的方式，如下所示（注意在 react so 驼峰式属性中）

            <text x="50%" y="50%"
                    className='middleText'
                    textAnchor="middle"
                    alignmentBaseline="middle"
                    >{style.displayVal.toFixed(precision)}</text>

这是文本在 Firefox 中的呈现方式：

您发现获得一致基线跨浏览器的最佳方法是什么？

Answer 1

将alignmentBaseline 替换为dominantBaseline。

Firefox 目前不支持前者，但支持后者。