Я работаю над компонентом React, в котором я визуализирую элемент rect и элемент text внутри элемента rect.
Кроме того, я хочу указать вертикальное выравнивание элемента text: для этого я нашел атрибут dominant-baseline (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline), который идеально подходит.
Жаль, что атрибут dominant-baseline не работает ни в IE11, ни в Edge. Чтобы решить проблему, я подумал, что мог бы вручную отрегулировать положение с помощью атрибута dy, но вот проблема: с помощью атрибута dominant-baseline браузер учитывает именно текст, а не его ограничивающий прямоугольник.
Например, если я присваиваю hanging атрибуту dominant-baseline и помещаю элемент text 10px сверху элемента rect, я получаю следующее:
Как видите, 10px от rect - это расстояние между вершиной rect и фактической записью метки. Вместо этого, если бы я рассмотрел boundingBoxRect элемента text и использовал его для позиционирования элемента text 10px от верхнего элемента rect, у меня будет следующий результат:
Сначала, я надеюсь, что я правильно объяснил, что такое «допущение», затем мой вопрос: есть ли способ получить фактическое пространство, занимаемое текстом? Что-то вроде getTextBoundingBox? В противном случае я не смог бы получить точно такой же результат в Chrome / Firefox / Opera (где работает dominant-baseline) и IE / Edge (где мне нужно было бы использовать атрибут dy с getBoundingBoxRect())