跨浏览器SVG文本基线对齐 [英] Cross-Browser SVG Text Baseline Alignment

问题描述

这是在Chrome浏览器中使用以下内容呈现SVG文本的方式(请注意，react so camel case属性)

This is how SVG text is rendered in browser for Chrome with the following (note in react so camel case attributes)

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

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

This is how the text renders in Firefox:

找到一致的基线跨浏览器的最佳方法是什么?

What is the best way you've found to get consistent baseline crossbrowser?

推荐答案

将alignmentBaseline替换为dominantBaseline.

replace alignmentBaseline with dominantBaseline.

Firefox当前不支持前者属性，但确实支持后者.

Firefox does not currently support the former property but does support the latter.

这篇关于跨浏览器SVG文本基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！