如何获取SVG tspan元素的宽度

Question

我正在尝试在SVG中获取tspan元素（位于text元素内）的渲染宽度。

这是我的标记：

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

在视觉上，我希望值1向左浮动，而值2向右浮动，因此多个元素将对齐：

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

由于我想要tpsan（“值1”/“值2”）的宽度而不是文本元素，我不能使用getBBox()，因为该方法不适用到tspan元素。

奇怪的是，使用jQuery的width()方法会在Chrome中返回正确的值，但会在Firefox中返回NaN。任何想法都将不胜感激。

Answer 1

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

Answer 2

您可以使用getBoundingClientRect()查找tspan的屏幕空间边界框。我已经测试过，发现它可以在Safari v5.0.4，Firefox 3.6和4.0RC以及Opera 11中运行。但是，fails with Chrome，v10.0.648.151和v11.0.696.14。 （它返回一个ClientRect，其所有值都设置为0。）

您必须通过乘以屏幕变换矩阵的倒数将此客户空间矩形转换为SVG坐标。这是一个有效的例子：
http://phrogz.net/SVG/tspan_bounding_box.xhtml

将此配对offsetWidth（适用于Chrome和Safari，但不适用于Firefox或Opera），您可以使用适用于所有支持SVG的浏览器的解决方案。