新手上路，请多包涵

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

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

单击 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>

原文由 oabarca 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript html svg

阅读 1k

2 个回答

得票最新

社区维基

发布于
2022-12-09

✓ 已被采纳

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

原文由 Tolokoban 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-09

Tolokoban 的解决方案有一个限制，如果您的 viewBox 偏离默认值，即它与 viewBox="0 0 width height" 不同，则它不起作用。一个更好的解决方案也考虑了 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 + ")");
}

（归功于发布代码的 Smerk）

如果 viewBox 未设置或设置为默认值，此脚本将返回与 Tolokoban 脚本相同的值。但是如果你有像 <svg width="100px" height="100" viewBox="0 0 200 200"> 这样的 SVG，只有这个版本会给你正确的结果。

原文由 Alexander Jank 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

问一个鼠标滚动事件，这种是怎么实现的？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译