如何获得SVG tspan元素的宽度

我试图在SVG中获取tspan元素的渲染宽度（位于text元素内）。如何获得SVG tspan元素的宽度

这是我的标记：

<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。任何想法，将不胜感激。

来源

2011-03-19 RussellUresti

也许看看控制台和.width的核心函数会产生一个解释？ – mattsven 2011-03-19 21:41:15

看来jQuery只是使用offsetWidth - 我试着安慰了offsetWidth值，Chrome给了我值，Firefox给了我'undefined'。 – RussellUresti 2011-03-19 21:54:11

您可以使用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以及所有的浏览器的解决方案。

来源

2011-03-21 02:44:54 Phrogz

这似乎工作，虽然它似乎不像offsetWidth一样准确（或者它更准确）。以下是我如何使用它的真实示例：http://jsfiddle.net/ArmRM/6411/我没有使用matrixTransform值，因为Firefox提供的.width和.height属性 - 不支持在Opera/Safari中？ – RussellUresti 2011-03-22 20:33:56

版本没有错误：http://jsfiddle.net/ArmRM/6412/（取出正则表达式） – RussellUresti 2011-03-22 20:52:42

我还没有时间看看你的示例代码，但我猜'offsetWidth'可能被指定以屏幕单位显示，而您需要将单位从屏幕空间转换为SVG空间或其他转换值。 – Phrogz 2011-03-22 23:29:35

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

来源

2013-09-10 21:53:12 madmed

注意：这是实际字符的宽度，而不是tspans的边界框。字体字符可以比tspan边界框略大。 – Axel 2014-05-15 17:03:43

谢谢！非常有帮助 – 2017-04-26 13:48:14

如何获得SVG tspan元素的宽度

回答

相关问题