Question

假设我有以下document (fiddle)：

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

如果我不知道它在一个组中，我如何得到rect元素的全局坐标？

Answer 1

实际上很难找到。搜索SVGElement的方法导致页面显示SVGElement没有方法！它确实有很多方法，但它们是遗传的：

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

根据您的需要，您可以使用getCTM或getScreenCTM的结果转换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/

Answer 2

您可以使用函数.getBoundingClientRect()来获取边界框。然后，使用height，width，top和left值来查找元素的中心位置。

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

如何获取分组svg元素的全局坐标？

2 个答案: