如何根据文档获取SVG中元素的坐标？

Question

在jQuery中，您可以执行

$('div').offset()

并根据文档返回元素的位置。

不幸的是，这不适用于SVG元素。

有什么方法可以像正常DOM元素那样获得SVG元素的绝对位置吗？

Answer 1

可以通过使用clientX，clientY加上pageXOffset，pageYOffset来确定。

在html页面中尝试：

<div id="svgDiv" style='width:400px;height:400px;'>
    <svg id="mySVG" width="400" height="400">
        <rect id="myRect" onmouseover="showMyComment(evt)"  onmouseout="hideMyComment()" x="100" y="100" width="100" height="100" fill="blue" />
    </svg>
</div>
<div style='position:absolute;visibility:hidden' id="myCommentDiv">This is my location</div>

与代码：

function showMyComment(evt)
{
    x=evt.clientX + window.pageXOffset
    y=evt.clientY + window.pageYOffset
    myCommentDiv.style.left=x+"px"
    myCommentDiv.style.top=y+"px"
    myCommentDiv.style.visibility="visible"
}
function hideMyComment()
{
  myCommentDiv.style.visibility="hidden"
}