获取SVG文本元素的宽度

时间:2016-09-22 15:57:44

标签: javascript jquery html css svg

我有以下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>​

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

enter image description here

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

enter image description here

但是,我无法从我的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对象的快照:

enter image description here

enter image description here

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:-1)

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

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

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

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