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

I haven't been able to calculate the click coordinates (x and y) relative to the element triggering the event. I have not found an easy example online.

我还不能计算相对于触发事件的元素的单击坐标(x和y)。我在网上找不到一个简单的例子。

I have a simple svg (with 100px left margin) in an HTML page. It contains a group (translated 30px 30px) which has an onclick listener attached. And inside that group I have a rect with 50px width and height.

我在HTML页面中有一个简单的svg(左距为100px)。它包含一个组(翻译30px 30px)，其中有一个onclick监听器。在这个组里，我有一个50px宽高的矩形。

After I click any part of the group element, I get an event object with coordinates relative to the HTML page (evt.clientX and evt.clientY).

单击group元素的任何部分后，我将获得相对于HTML页面(evt)具有坐标的事件对象。clientX和evt.clientY)。

What I need to know is where exactly the user clicked inside the group element (the element holding the onclick listener).

我需要知道的是用户在group元素(包含onclick侦听器的元素)中具体单击的位置。

How do I convert clientX and clientY coordinates to the group element coordinates. So say, if I click the top leftmost part of the rect it should give me x=0 and y=0.

如何将clientX和clientY坐标转换为组元素坐标。假设，如果我点击矩形的左上部分它会得到x=0 y=0。

Here is currently what I have:

以下是我目前的资料:

<!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>

2 个解决方案

#1

Try to use getBoundingClientRect(): http://jsfiddle.net/fLo4uatw/

尝试使用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);
}

#2

Tolokoban's solution has the limitation that it doesn't work if your viewBox deviates from the default, that is if it is different from viewBox="0 0 width height". A better solution that also takes viewBox into account is this:

Tolokoban的解决方案有一个限制，即如果你的视图与默认值不一致，也就是它与viewBox=“0 0宽度高度”不同，那么它就不能工作。考虑到viewBox的更好的解决方案是:

var pt = svg.createSVGPoint();  // Created once for document

function alert_coords(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;

    // The cursor point, translated into svg coordinates
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");
}

(Credit goes to Smerk, who posted the code)

(密码由Smerk提供)

If the viewBox is not set or set to the default, this script will return the same values as Tolokoban's script. But if you have an SVG like <svg width="100px" height="100" viewBox="0 0 200 200">, only this version will give you the correct results.

如果viewBox没有设置或设置为默认值，此脚本将返回与Tolokoban脚本相同的值。但是如果你有一个SVG，比如< SVG宽度="100px"的高度="100" viewBox="0 200 200">，只有这个版本会给你正确的结果。

#1