如何获取 SVG tspan 元素的宽度
我试图获取 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 "/"value 2") 而不是文本元素，我无法使用 getBBox()，因为该方法不适用于 tspan 元素。
奇怪的是，使用 jQuery 的 width() 方法将在 Chrome 中返回正确的值，但在 Firefox 中返回 NaN。任何想法将不胜感激。
I'm trying to get the rendered width of a tspan element (located inside a text element) in SVG.
This is my markup:
<text>
<tspan>Value 1</tspan>
<tspan>Value 2</tspan>
</text>
Visually, I want value 1 to float left, while value 2 floats right, so that a multiple elements will align as such:
Value 1 Value 2
Value 10 Value 20
Value 100 Value 200
Value 1000 Value 2000
Since I want the width of the tpsan ("value 1"/"value 2") and not the text element, I can't use getBBox(), as that method doesn't apply to tspan elements.
Oddly enough, using jQuery's width() method will return the correct value in Chrome, but returns NaN in Firefox. Any ideas would be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试多种解决方案后，我发现 getCompulatedTextLength 是获取的最准确方法svg tspan 的宽度。它也得到了很好的支持，并且在不同浏览器上的行为方式相同。我还发现获取 tspan 高度的最佳方法就是读取 font-size 属性。
After trying multiple solutions I found getComputedTextLength to be the most accurate way to get the width of an svg tspan. It is also well supported and behaves the same way on different browsers. I also found that the best way to get the height of a tspan is simply to read the font-size attribute.
您可以使用
getBoundingClientRect()来查找tspan的屏幕空间边界框。我已经测试过，发现它可以在 Safari v5.0.4、Firefox 3.6 和 4.0RC 以及 Opera 11 中运行。但是，它 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 的浏览器的解决方案。You can use
getBoundingClientRect()to find the screen-space bounding box of thetspan. I've tested and found this to work in Safari v5.0.4, Firefox 3.6 and 4.0RC, and Opera 11. However, it fails with Chrome, v10.0.648.151 and v11.0.696.14. (It returns a ClientRect with all values set to0.)You'll have to transform this client-space rectangle into SVG coordinates by multiplying by the inverse of the screen transform matrix. Here's a working example:
http://phrogz.net/SVG/tspan_bounding_box.xhtml
Pair this with
offsetWidth(which works in Chrome and Safari, but not Firefox or Opera) and you have a solution that should work in all browsers that support SVG well.