Javascript 如何获取SVG tspan元素的宽度

我试图获得SVG中

tspan

元素（位于

text

元素内部）的渲染宽度

这是我的标记：

<text>
    <tspan>Value 1</tspan>
    <tspan>Value 2</tspan>
</text>

因为我想要的是

tpsan

（“值1”/“值2”）的宽度，而不是文本元素，所以我不能使用

getBBox（）

，因为该方法不适用于

tspan

元素

奇怪的是，使用jQuery的

width（）

方法会在Chrome中返回正确的值，但在Firefox中返回

NaN

。如果您有任何想法，我们将不胜感激。

您可以使用找到

tspan

的屏幕空间边界框。我在Safari v5.0.4、Firefox 3.6和4.0RC以及Opera 11中进行了测试，发现它可以正常工作。但是，它支持v10.0.648.151和v11.0.696.14。（它返回一个ClientRect，所有值都设置为

0

）

您必须通过乘以屏幕转换矩阵的倒数，将这个客户机空间矩形转换为SVG坐标。下面是一个工作示例：

---

将其与offsetWidth（适用于Chrome和Safari，但不适用于Firefox或Opera）相结合，您就有了一个在所有支持SVG的浏览器中都能正常工作的解决方案。

在尝试了多种解决方案后，我发现这是获得SVG tspan宽度的最准确的方法。它也得到了很好的支持，并且在不同的浏览器上表现相同。我还发现，获取tspan高度的最佳方法就是读取字体大小属性。

也许看看控制台，.width的核心函数会得出一个解释？jQuery似乎只使用了offsetWidth——我尝试了只合并offsetWidth值，Chrome给了我值，Firefox给了我“未定义的”。这似乎确实有效，尽管它似乎没有offsetWidth那么准确（或者可能更准确）。下面是我如何使用它的真实示例：我没有使用matrixTransform值，因为Firefox提供了.width和.height属性——这些属性在Opera/Safari中不受支持吗？我还没有时间看一下您的示例代码，但是我猜测，当您需要将单位从屏幕空间转换为SVG空间时，可能会以屏幕单位指定

offsetWidth

，或者进一步转换值。getClientBoundingRect不会在所有浏览器中都起作用。我认为getComputedTextLength是最好的方法。注意：这是实际字符的宽度，而不是tspans的边界框。字体字符可以略大于tspan边框。谢谢！非常有用，我最后使用了这个，以便在包含多行tspans的段落文本元素中模拟对齐。使用每个跨距的宽度，然后可以通过改变其x值来左对齐和居中对齐所有跨距，相对于上面的tspan。要左对齐跨距，通常不需要做任何事情，但如果出于某种原因，跨距还没有全部左对齐，那么将所有x值设置为0可以做到这一点，这是最简单的事情。兄弟，你真是个救命恩人

Value 1                                                                   Value 2
Value 10                                                                 Value 20
Value 100                                                               Value 200
Value 1000                                                             Value 2000