如何获取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 (“Valual1”/“Value2”)的宽度，而不是文本元素，所以不能使用getBBox()，因为该方法不适用于tspan元素。

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

Answer 1

您可以使用getBoundingClientRect()查找tspan的屏幕空间边界框。我在Safariv5.0.4，Firefox3.6和4.0RC，还有Opera11上测试过，但是fails with Chrome，v10.0.648.151和v11.0.696.14。(它返回一个所有值都设置为0的ClientRect。)

您必须将这个客户端空间矩形转换为SVG坐标，方法是乘以屏幕转换矩阵的逆矩阵。下面是一个有效的示例：

http://phrogz.net/SVG/tspan_bounding_box.xhtml

将其与offsetWidth (在Chrome和Safari中工作，但不能在Firefox或Opera中工作)相结合，您就有了一个应该在所有支持SVG的浏览器中都能很好地工作的解决方案。

Answer 2

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