如何获得相对于持有onclick侦听器的SVG元素的点击坐标？

oabarca 发表于 Javascript

oabarca：

我还无法计算相对于触发事件的元素的点击坐标（x和y）。我还没有在网上找到一个简单的例子。

我svg在HTML页面中有一个简单的页面（左边距为100px）。它包含一个group（翻译后的30px 30px），其中onclick附加了一个侦听器。在里面，group我有一个rect50px的宽度和高度。

单击group元素的任何部分后，我将获得一个事件对象，该对象的坐标相对于HTML页面（evt.clientX和evt.clientY）。

我需要知道的是用户在group元素（包含onclick侦听器的元素）内确切单击的位置。

如何转换clientX并clientY协调为group元素坐标。可以这么说，如果我单击它的最左上部分，rect它应该给我x = 0和y = 0。

这是我目前拥有的：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                background:black;
            }
            svg{
                fill:white;
                background:white;
                position: absolute;
                top:100px;
                left:100px;
            }
            
        </style>
        <script>
            function clicked(evt){
                alert("x: "+evt.clientX+" y:"+evt.clientY);
            }
        </script>
    </head>
    <body>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                <g transform="translate(30 30)" onclick="clicked(evt)">
                    <rect x="0" y="0" width="50" height="50" fill="red"/>
                </g>
            </svg>      
        </div>
    </body>
</html>

Tolokoban：

尝试使用getBoundingClientRect()：http：//jsfiddle.net/fLo4uatw/

function clicked(evt){
    var e = evt.target;
    var dim = e.getBoundingClientRect();
    var x = evt.clientX - dim.left;
    var y = evt.clientY - dim.top;
    alert("x: "+x+" y:"+y);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。