Question

我有以下SVG文本元素：

<text data-model-id="k10673" x="584" y="266" fill-opacity="1" style="font: 12px Arial,Helvetica,sans-serif; " fill="#a5d16f">BU YIL SONU</text>

它大约位于屏幕中间。我可以按如下方式检查：

我需要获取此文本的宽度。在chrome调试器上，我可以看到文本的宽度为83.941

但是，我无法从我的Javascript页面获得此宽度。任何与宽度相关的方法都会返回零，尽管Chrome调试器正确显示它。

我得到的元素如下：

var x = document.querySelector("#k11489 > g:nth-child(27) > text:nth-child(1)")

然后，跟随Javascript函数返回零或未定义：

x.getComputedTextLength()
x.getBBox().width
x.style.width

此外，我在获取jQuery对象后尝试了以下jQuery函数，但是，它们都没有返回宽度：

x.width() //Returns the function
x.innerWidth() //Returns null
x.outerWidth() //Returns null

注意：为了确保x指向文本元素，我通过控制台检查它们。以下是Javascript和jQuery对象的快照：

如何通过Javascript或jQuery获取此对象的宽度？

Answer 1

不知道它是否适用于文本元素，但对我来说，

document.querySelector('.whatever').getBoundingClientRect().width;

有效，并遵守svg的当前缩放比例。另请参见this answer-调整接受的答案以使文本节点为目标对我有用。

Answer 2

您可以使用getBBox（）（它是SVG 1.1的一部分）来获取svg元素的宽度，如下所示。

$("your_jquery_selector")[0].getBBox().width.

如果它是有效的选择器，那么使用

$("#k11489 > g:nth-child(27) > text:nth-child(1)")[0].getBBox().width