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

Question

我正在使用 d3js，其中 lib 根据数据创建节点和链接。 在某些地方，有一些特定的要求，需要在同一行中添加多个文本，例如 url“www.xyz.com/home/user”(此处为 3 个字符串“www.xyz.com”、“/home”、“/user”)。它们不是单独的节点，因此我无法找到 d3 的位置。它只是一个带有 3 个 子元素的 元素。

<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 

我需要获取每个 元素的位置和宽度。我的代码是

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

给出 g 元素内文本的相对位置，但在某些浏览器和 Mac 上它将返回绝对位置。

是否有任何正确的方法可以在适用于所有浏览器的 JavaScript 中查找 tspan 的位置和宽度(IE 必须> 9th 版本)。

Answer 1

在 SVG 1.1 tspan 中没有 getBBox 方法，但在 SVG2 中却有，我报告了一个 chromium bug，因为它报告了错误的值，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 .