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

SVG 1.1の一部であるgetBBox（）を使用すると、以下のようにsvg要素の幅を取得できます。それが有効なセレクタは、次に使うならDOMは、要素にアクセスしようとする前に準備ができるまで

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

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