我有以下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获取此对象的宽度?
答案 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