javascript - 在 Javascript 中获取元素的 X,Y 位置

Question

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

var svg = document.getElementById("svg1");
svg.addEventListener('click', event => {
  let x = event.clientX;
  let y = event.clientY;
  console.log(x, y);
});

html {
  height: 100%
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
}

svg {
  height: 100%;
  background: grey;
}

<svg id="svg1" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#52c927" />
    <circle cx="50" cy="50" r="25"   fill="white" />
    <circle cx="50" cy="50" r="15"  fill="red" />
</svg>

想要在控制台中打印 X 和 Y 之前减去 SVG 的 offsetLeft 和 offsetTop 。但无法获得这些值

Answer 1

要获取元素坐标或大小，请使用 Element.getBoundingClientRect

event.target.getBoundingClientRect() 或 event.currentTarget.getBoundingClientRect() (针对绑定(bind)到监听器的元素，而不是传播事件的元素) 。或者直接使用缓存的 Element 引用常量 svg.getBoundingClientRect()

const bcr = event.target.getBoundingClientRect();
console.log(bcr.left, bcr.top)

https://developer.mozilla.org/en-US/docs/Web/API/Element/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);
});