Cross-Browser SVG Text Baseline Alignment

问题

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>

This is how the text renders in Firefox:

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

回答1:

replace alignmentBaseline with dominantBaseline.

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

来源：https://stackoverflow.com/questions/51090439/cross-browser-svg-text-baseline-alignment