获取Javascript中元素的X，Y位置

我想找到鼠标点击相对于SVG元素的X，Y位置。SVG元素将嵌入HTML中

var svg=document.getElementById（“svg1”）；
addEventListener（'click'，event=>{
设x=event.clientX；
设y=event.clientY；
控制台日志（x，y）；
});
html{
身高：100%
}
身体{
身高：100%；
显示器：flex；
证明内容：中心；
背景色：#fff；
}
svg{
身高：100%；
背景：灰色；
}
要获取元素坐标或大小，请使用

event.target.getBoundingClientRect（）
或
event.currentTarget.getBoundingClientRect（）
（用于绑定到侦听器的元素，而不是传播事件的元素）。或者直接使用缓存的元素引用常量
svg.getBoundingClientRect（）


在您的特定情况下，要获取相对鼠标坐标，请执行以下操作：

var svg = document.getElementById("svg1");
svg.addEventListener('click', event => {
  const bcr = event.target.getBoundingClientRect();
  const relative_x = event.clientX - bcr.left;
  const relative_y = event.clientY - bcr.top;
  console.log(relative_x, relative_y);
});

您可以获得相对于元素的坐标，如下所示：


var svg=document.getElementById（“svg1”）；
addEventListener（'click'，event=>{
const rect=svg.getBoundingClientRect（）；
设x=event.clientX-rect.left；
设y=event.clientY-rect.top；
控制台日志（x，y）；
});
html{
身高：100%
}
身体{
身高：100%；
显示器：flex；
证明内容：中心；
背景色：#fff；
}
svg{
身高：100%；
背景：灰色；
}
您使用的浏览器是什么？“clientWidth”和“clientHeight”在Firefox版本52之前的SVG元素上不起作用（我认为）。我使用的是chrome
83.0.4103.97版（官方版本）（64位）
var svg = document.getElementById("svg1");
svg.addEventListener('click', event => {
  const bcr = event.target.getBoundingClientRect();
  const relative_x = event.clientX - bcr.left;
  const relative_y = event.clientY - bcr.top;
  console.log(relative_x, relative_y);
});