javascript - 如何获取 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 属性。