如何获取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中返回正确的值,但NaN在Firefox中返回.任何想法,将不胜感激.

Answer 1

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

Answer 2

您可以使用getBoundingClientRect()来查找tspan. 我已经测试并发现它可以在 Safari v5.0.4、Firefox 3.6 和 4.0RC 以及 Opera 11 中工作。但是，它在 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 的浏览器的解决方案。