如何获取tspan元素的位置和宽度

Question

我正在使用d3js，其中lib根据数据创建节点和链接。 在某些地方有一些特定的要求，在同一行添加多个文本，如网址“www.xyz.com/home/user”（此处为3个字符串“www.xyz.com”，“/ home”，“/ user”）。它们不是单独的节点，所以我找不到d3的位置。它只是一个＆lt; text＆gt;具有3＆lt; tspan＆gt;的元素孩子。

<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 

我需要获得每个＆lt; tspan＆gt;的位置和宽度。元件。我的代码是

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。