Firefox 15 中的 svg:text 元素的宽度似乎始终为零（或 NaN）答案

【问题标题】：The width seems to be zero (or NaN) always for an svg:text element in Firefox 15Firefox 15 中的 svg:text 元素的宽度似乎始终为零（或 NaN）
【发布时间】：2012-09-10 06:54:27
【问题描述】：

我正在使用 d3 制作具有多个路径的图表。我在左侧显示路径描述。数据和描述是动态的，所以图例的大小自然也是动态的，因为只要我知道文本的大小（只是对域/范围的微小调整），这没什么大不了的。问题是我看不到在 Firefox 浏览器中查找文本元素大小的简单方法。

以前我是用 jquery 的.width() 做的，但元素上的 clientWidth 为零，这似乎导致返回 NaNpx。

...
.on("click", function(){
    alert( $(this).width() ); // NaNpx
})
...

DEMO：点击文字。

【问题讨论】：

不知道为什么它被否决了，是不是问题没有很好地形成？我什至有一个小提琴来显示问题....或者因为我在发布问题之前找到了解决方案，但决定发布它们以希望它可以帮助其他人？ C'est la vie。

标签： javascript charts svg d3.js nan

【解决方案1】：

在写这个问题时，我找到了解决方案（但仍然会发布它，因为我花了很长时间搜索，然后才深入到代码示例中找到它）。可能只是因为我本月是 d3 和 svg 的新手，但是在文本元素（大多数元素）上有一个 getBBox() 方法，它将生成一个宽度/高度/x/y 的对象（它真的应该是代替 jquery 用于所有 svg 维度）。

希望发布此内容可以帮助遇到此问题的其他人，因为它对我来说似乎不太明显。

DEMO

在示例中，~~ 是一个翻转位运算符，两次实际上会像 Math.floor() 一样工作，但在所有浏览器中可能会比 .floor() 更快。

【讨论】：

我在 FF 10 和 15 中尝试使用 .getBBox() 或 .getComputedTextLength() 时看到一个严重的渲染错误。
我刚刚在 FF 15.0.1 和 16.0.0（提供了 DEMO）中进行了尝试，一切正常，没有任何错误。你有这些错误的提琴手吗？

【解决方案2】：

遇到同样的问题。似乎 Firefox (45.0) 中存在一个错误，即 SVG 中的元素宽度始终为 0。

我通过使用元素（在元素内）克服了这个错误，并且似乎具有正确的文本宽度。

希望对你有帮助。

【讨论】：