Получить SVG текст элемента Ширина

Question

У меня есть следующий SVG элемент текста:

<text data-model-id=​"k10673" x=​"584" y=​"266" fill-opacity=​"1" style=​"font:​ 12px Arial,Helvetica,sans-serif;​ " fill=​"#a5d16f">​BU YIL SONU​</text>​ 

Пришло примерно в середине экрана. И я могу проверить это следующим образом:

мне нужно, чтобы получить ширину этого текста. На хромированной отладчик, я могу видеть, что текст имеет ширину 83.941

Однако, я не могу получить эту ширину от моей страницы Javascript. Любой метод, связанный с шириной, возвращает ноль, хотя он корректно отображается отладчиком Chrome.

я получаю элемент следующим образом:

var x = document.querySelector("#k11489 > g:nth-child(27) > text:nth-child(1)") 

Затем, следуя Javascript функции все возвращают ноль или не определено:

x.getComputedTextLength() 
x.getBBox().width 
x.style.width 

Также я попытался следующие функции JQuery после получения объекта JQuery , однако ни одна из них не возвращает ширину:

x.width() //Returns the function 
x.innerWidth() //Returns null 
x.outerWidth() //Returns null 

Примечание: Чтобы убедиться, что x указывает на текстовый элемент, я проверяю их через консоль. Ниже приведены снимки Javascript и JQuery объектов:

Как я могу получить ширину этого объекта в JavaScript, с помощью или JQuery?

Answer 1

Вы можете использовать getBBox() (который является частью SVG 1.1), чтобы получить ширину элемента svg, как показано ниже.

$("your_jquery_selector")[0].getBBox().width. 

Если это допустимый селектор затем использовать

$("#k11489 > g:nth-child(27) > text:nth-child(1)")[0].getBBox().width