如何獲取tspan元素的位置和寬度

Question

我正在使用d3js，其中lib根據數據創建節點和鏈接。 在某些地方有一些特定的要求，如URL「www.xyz.com/home/user」（這裏是3個字符串「www.xyz.com」，「/ home」，「/ user」）添加多行文本。他們不是單獨的節點，所以我無法找到d3的位置。這只是一個< text>元素，其中有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> 

和顯示這樣下面

www.xyz.com/home/user 

我需要獲得每個< TSPAN>元件的位置和寬度。我的代碼是

var el = document.getElementById(d.source); 
x = el.getStartPositionOfChar('').x (or) 
x = el.getClientRects().left; 

給g元素內的文本的相對位置，但在某些瀏覽器和Mac上它將返回絕對位置。

是否有任何正確的方法來找到JavaScript中與所有瀏覽器一起工作的tspan的位置和寬度（IE必須>第9版）。

Answer 1

在SVG 1.1 TSPAN沒有getBBox方法，但在SVG2它，我已經報道了鉻的錯誤它報告了錯誤的值，http://code.google.com/p/chromium/issues/detail?id=349835。

這會給你正確的位置和尺寸，如果瀏覽器中實現SVG2：

var bbox = document.getElementById("TaxFilingResource.URL.2").getBBox();

一個完整的示例，請參見jsfiddle。

現在，你可以使用在SVG 1.1中提供的方法做一個變通方法：

var home = document.getElementById("TaxFilingResource.URL.2"); 
var extent = home.getExtentOfChar(0); // pos+dimensions of the first glyph 
var width = home.getComputedTextLength(); // width of the 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; 

見jsfiddle。

如果您需要轉換到另一個地方的樹：

var dest = document.getElementById("dest"); // some arbitrary container element 
var fromHometoDestmatrix = home.getTransformToElement(dest); 
rect.transform.baseVal.appendItem(
    rect.transform.baseVal.createSVGTransformFromMatrix(fromHometoDestmatrix)); 
dest.appendChild(rect); 

見jsfiddle。