8

假设我有以下文件(小提琴)

<svg>
    <g transform="translate(50,50)">
        <rect width="20" height="20" style="fill:black;">
    </g>
</svg>

假设我不知道它在一个组中,我如何获得 rect 元素的全局坐标?

4

2 回答 2

13

其实有点难找。在页面中搜索SVGElement结果的方法说SVGElement没有方法!它实际上有很多方法,但它们是继承的:

http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable

根据您的需要,您可以使用getCTM或的结果getScreenCTM来转换 a SVGPoint,从而了解您的元素在哪里:

root = document.getElementById('root')
rec = document.getElementById('rec')
point = root.createSVGPoint()
# This is the top-left relative to the SVG element
ctm = rec.getCTM()
console.log point.matrixTransform(ctm)
# This is the top-left relative to the document
ctm = rec.getScreenCTM()
console.log point.matrixTransform(ctm)

http://jsfiddle.net/kitsu_eb/ZXVAX/3/

于 2013-07-23T18:57:32.730 回答
0

您可以使用该函数.getBoundingClientRect()来获取边界框。然后,使用、 和heightvalueswidth找到元素的中心位置。topleft

参考https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect

于 2017-09-25T08:00:08.677 回答