当用户单击SVG图中的元素时,我想显示一个覆盖图(html div)。为了可视化我所遇到的问题,假设SVG图像具有6个元素的水平行。在click事件中,我获取了元素的坐标,并使用它们在其旁边显示了叠加层。问题在于,当我从左到右单击元素时,我注意到元素和叠加层之间的水平偏移越来越小。也就是说,第6个元素显示的叠加层比第一个元素离它更近。 Chrome和FF都会发生这种情况,这是一个问题,因为有时叠加层会覆盖元素本身。
最初,我使用的是JQuery的position()属性,该属性没有表现出我上面描述的行为,但是它在Chrome和Firefox中返回了非常不同的值,并且svg元素上的JQuery并未正式支持它。因此,我尝试使用DOM的标准offsetLeft和offsetTop以及svg的x.animVal.value属性和在网络上找到的各种库,但是它们都具有相同的不稳定偏移问题。我认为发生这种情况是因为svg图像已缩放,因此我正在寻找一种方法来获取相对于包含它的实际html文档的svg元素位置。有没有办法做到这一点?
最佳答案
如果您自3月以来没有解决任何问题(以及其他有此问题的人),请尝试在SVG节点上使用getBoundingClientRect()
。
返回一个ClientRect
对象,该对象为您提供相对于文档的顶部,底部,左侧,右侧,宽度和高度。能够使用它将Twitter Bootstrap弹出窗口(div)放置在SVG矩形旁边。
关于javascript - SVG:获取元素相对于页面的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9627005/