javascript - How to get the position and width of a tspan element -

i working d3js lib create nodes , links according data. @ place have specific requirement add multiple text in same line url "www.xyz.com/home/user" (here 3 strings "www.xyz.com","/home","/user"). not separate nodes can't find position d3. it's <text> element 3 <tspan> children.

<text id="taxfilingresource_url" class="label url" dy="24" dx="30">   <tspan id="taxfilingresource.url.1">www.xyz.com</tspan>   <tspan id="taxfilingresource.url.2">/home</tspan>   <tspan id="taxfilingresource.url.3">/user</tspan> </text>  

and displaying below

  www.xyz.com/home/user  

i need position , width of each <tspan> element. code

var el = document.getelementbyid(d.source); x = el.getstartpositionofchar('').x   (or) x = el.getclientrects().left; 

that give relative position on text inside g element , in browser , on mac return absolute position.

is there right way find position , width of tspan in javascript worked browsers ( ie must > 9th version).

in svg 1.1 tspan doesn't have getbbox method, in svg2 does, i've reported chromium bug reporting wrong value, http://code.google.com/p/chromium/issues/detail?id=349835.

this give proper position , dimensions if browsers implemented svg2:

var bbox = document.getelementbyid("taxfilingresource.url.2").getbbox();

see jsfiddle full example.

for now, can workaround using methods available in svg 1.1:

var home = document.getelementbyid("taxfilingresource.url.2"); var extent = home.getextentofchar(0); // pos+dimensions of first glyph var width = home.getcomputedtextlength(); // width of tspan var rect = document.createelementns("http://www.w3.org/2000/svg", "rect"); rect.x.baseval.value = extent.x; rect.y.baseval.value = extent.y; rect.width.baseval.value = width; rect.height.baseval.value = extent.height; 

see jsfiddle.

if need transform place in tree:

var dest = document.getelementbyid("dest"); // arbitrary container element var fromhometodestmatrix = home.gettransformtoelement(dest); rect.transform.baseval.appenditem(   rect.transform.baseval.createsvgtransformfrommatrix(fromhometodestmatrix)); dest.appendchild(rect); 

see jsfiddle.