Desejo encontrar a posição X, Y do clique do mouse em relação ao elemento SVG. O elemento SVG será incorporado em 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>Deseja subractar offsetLeft e offsetTop de SVG antes de imprimir X e Y no console. Mas não é capaz de obter esse valor
Para obter as coordenadas ou o tamanho de um elemento, use Element.getBoundingClientRect
event.target.getBoundingClientRect()ou event.currentTarget.getBoundingClientRect()(para o elemento vinculado ao ouvinte, em vez de aquele que propagou o evento). Ou diretamente com sua constante de referência de Elemento em cachesvg.getBoundingClientRect()
const bcr = event.target.getBoundingClientRect();
console.log(bcr.left, bcr.top)
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
No seu caso específico, para obter as coordenadas relativas do mouse:
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);
});
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras