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

Question

我正在使用d3js,其中lib根据数据创建节点和链接.在某些地方有一些特定的要求,在同一行添加多个文本,如网址"www.xyz.com/home/user"(此处为3个字符串"www.xyz.com","/ home","/ user").它们不是单独的节点,所以我找不到d3的位置.它只是一个带有3个<tspan>子元素的<text>元素.

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