Как получить ширину SVG-элемента tspan

Question

Я пытаюсь получить визуализированную ширину элемента tspan (расположенного внутри элемента text) в SVG.

Это моя разметка:

<text>
    <tspan>Value 1</tspan>
    <tspan>Value 2</tspan>
</text>

Визуально, я хочу, чтобы значение 1 плавало влево, а значение 2 - вправо, так что несколько элементов будут выровнены следующим образом:

Value 1                                                                   Value 2
Value 10                                                                 Value 20
Value 100                                                               Value 200
Value 1000                                                             Value 2000

Поскольку мне нужна ширина tpsan («значение 1» / «значение 2»), а не текстовый элемент, я не могу использовать getBBox(), так как этот метод не применяется к tspan элементы.

Как ни странно, использование метода jQuery width() вернет правильное значение в Chrome, но вернет NaN в Firefox. Любые идеи будут оценены.

Answer 1

Попробовав несколько решений, я обнаружил, что getComputedTextLength является наиболее точным способом определения ширины svg tspan. Он также хорошо поддерживается и ведет себя одинаково в разных браузерах. Я также обнаружил, что лучший способ получить высоту tspan - это просто прочитать атрибут font-size.

Answer 2

Вы можете использовать getBoundingClientRect(), чтобы найти ограничивающую рамку области экрана tspan. Я протестировал и обнаружил, что это работает в Safari v5.0.4, Firefox 3.6 и 4.0RC и Opera 11. Однако не работает с Chrome , v10.0.648.151 и v11.0.696.14. (Возвращает ClientRect со всеми значениями, установленными на 0.)

Вам придется преобразовать этот прямоугольник клиентского пространства в координаты SVG, умножив его на обратную матрицу преобразования экрана. Вот рабочий пример:
http://phrogz.net/SVG/tspan_bounding_box.xhtml

Сопоставьте это с offsetWidth (который работает в Chrome и Safari, но не с Firefox или Opera), и у вас есть решение, которое должно работать во всех браузерах, которые хорошо поддерживают SVG.