跨浏览器 SVG 文本基线对齐

Question

这是 Chrome 在浏览器中呈现 SVG 文本的方式，具有以下内容（请注意 react 中的驼峰式属性）

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

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

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

Answer 1

将 alignmentBaseline 替换为 dominantBaseline。

Firefox 目前不支持前者 属性 但支持后者。