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

我正在使用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> 

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

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

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

是否有任何正确的方法可以在JavaScript中找到tspan的位置和宽度，该JavaScript适用于所有浏览器（IE必须>第9版）。

---

在SVG 1.1 tspan中没有

getBBox

方法，但在SVG2中，我报告了一个铬错误，因为它报告了错误的值

如果浏览器实现了SVG2，这将为您提供正确的位置和尺寸：

var bbox=document.getElementById（“TaxFilingResource.URL.2”）.getBBox（）

有关完整示例，请参见

现在，您可以使用SVG 1.1中提供的方法进行变通：

var home=document.getElementById（“TaxFilingResource.URL.2”）；
var extent=home.getextendtofchar（0）；//位置+第一个图示符的尺寸
var width=home.getComputedTextLength（）；//板坯宽度
var rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.x.baseVal.value=范围.x；
rect.y.baseVal.value=范围.y；
rect.width.baseVal.value=宽度；
rect.height.baseVal.value=extent.height；

看

如果需要转换到树中的其他位置：

var dest=document.getElementById（“dest”）；//任意容器元素
var fromHometoDestmatrix=home.getTransfermToElement（dest）；
rect.transform.baseVal.appendItem(
rect.transform.baseVal.createSVGTransformFromMatrix（fromHometoDestmatrix））；
目标追加子对象（rect）；

请参阅。
，应该会有帮助。我忘了提到d3js节点在元素内部，因此存在相对点和绝对点的问题，但它似乎没有解释dy，也没有在tspan周围提供一个紧凑的框？有没有办法，你知道吗？
var el = document.getElementById(d.source);
x = el.getStartPositionOfChar('').x   (or)
x = el.getClientRects().left;