获取SVG文本元素的宽度

Question

I have the following SVG text element:

<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>​

It's approximately in the middle of the screen. And I can inspect it as follows:

I need to get the width of this text. On chrome debugger, I can see the that the text has a width of 83.941

However, I cannot get this width from my Javascript page. Any method related to the width returns zero, although it's correctly displayed by Chrome debugger.

I get the element as follows:

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

Then, following Javascript functions all return zero or undefined:

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

Also I've tried the following jQuery functions after getting the jQuery object, however, none of them returns the width either:

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

Note: In order to make sure that x points to the text element, I check them through the console. Following are the snapshots of Javascript and jQuery objects:

How can I get this object's width in by Javascript or jQuery?

Answer 1

Dont know if it works on textelements, but for me, the

document.querySelector('.whatever').getBoundingClientRect().width;

works, and respects current scaling of the svg. See also this answer - adapting the accepted answers fiddle to target a text node, works for me.

Answer 2

You can use getBBox() (which is part of SVG 1.1) to get the width of an svg element as below.

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

If it's valid selector then use

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