javascript - 获取 SVG 文本元素的宽度

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 - 调整接受的答案 fiddle 以定位文本节点，对我有用。