我有以下 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 获取该对象的宽度?
最佳答案
不知道它是否适用于文本元素,但对我来说,
document.querySelector('.whatever').getBoundingClientRect().width;
可以工作,并且遵循 svg 的当前缩放比例。另请参阅this answer - 调整接受的答案 fiddle 以定位文本节点,对我有用。
关于javascript - 获取 SVG 文本元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39643726/