我无法计算相对于触发事件的元素的点击坐标(x 和 y)。我还没有在网上找到一个简单的例子。
我在 HTML 页面中有一个简单的 svg(左边距为 100px)。它包含一个 group(翻译为 30px 30px)，它附加了一个 onclick 监听器。在那个 group 中，我有一个宽度和高度为 50px 的 rect。
在我点击 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 的解决方案有一个限制，如果您的 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，他 posted the code )
如果 viewBox 未设置或设置为默认值，此脚本将返回与 Tolokoban 脚本相同的值。但是如果你有像 <svg width="100px" height="100" viewBox="0 0 200 200"> 这样的 SVG , 只有这个版本会给你正确的结果。
关于javascript - 如何获取相对于持有 onclick 监听器的 SVG 元素的点击坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29261304/