获取 SVG 文本元素的宽度答案

【问题标题】：Get SVG text element's width获取 SVG 文本元素的宽度
【发布时间】：2017-01-31 07:23:30
【问题描述】：

我有以下 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 获取该对象的宽度？

【问题讨论】：

您是否要等到 DOM 准备好后再尝试访问元素？
@PaulLeBeau 我正在 Chrome 的开发者控制台中尝试这些，在 DOM 加载几分钟后。
你知道x是否指向文本元素吗？
@ConnorsFan 是的，我编辑了问题并添加了 x 指向文本元素的快照。
好的。我们能看到 SVG 元素本身的声明吗？当我使用getComputedTextLength 或getBBox 进行测试时，我可以获得文本元素的宽度，但我不确定它是在与您相同的上下文中声明的。

【解决方案1】：

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

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

有效，并尊重 svg 的当前缩放。另请参阅this 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

【讨论】：

OP 在问题中指出他们尝试过这个并且它返回 0。
我测试了 jquery 函数和 javscript 函数，并且都为我的本地测试之一工作。请看这个截图dropbox.com/s/q2jhjggwiv691bi/svg.png?dl=0。由于他已将此功能应用于 javascript，因此问题可能出在 dom 选择器上。如果特定元素不存在，那么最终他会得到一个 undefined for the with。首先他必须确保选择器是正确的
所有这一切都证明了 OP 正在做一些不同的事情。该元素确实存在，因为他在问题的屏幕截图中显示了选择的结果。
.getBBox().width 显示元素的原始宽度，而不是当前宽度（svg 可能以不同大小显示...）...