Кросс-браузерное выравнивание текста SVG

Question

Вот как SVG-текст отображается в браузере для Chrome следующим образом (обратите внимание, реагируют на атрибуты верблюда)

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

Вот как текст отображается в Firefox:

Каков наилучший способ найти согласованный базовый кроссбраузер?

Answer 1

заменить alignmentBaseline на dominantBaseline.

Firefox в настоящее время не поддерживает первое свойство, но поддерживает второе.