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

Question

在jQuery中，你可以做

$('div').offset() 

，并返回根据该文件的一个元素的位置。

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

有没有什么办法让SVG元素的绝对位置就像正常的DOM元素一样？

Answer 1

这可以通过使用clientX，clientY plus 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" 
}