Estoy tratando de descubrir cómo mostrar un enlace en el que se puede hacer clic solo dentro del área de la ruta de recorte existente. Y también utilice el valor OffsetX existente.
<style> .mouse { background-color: aqua; } .img { background-color: black; } </style> <div class="wrap"> <div class="img"></div> <div class="mouse"> <p id="anchor"></p> </div> </div> <script> let main = document.querySelector('.wrap'); let mouse = document.querySelector('.mouse'); let text = "Text link"; let result = text.link("www.stackoverflow.com"); document.getElementById("anchor").innerHTML = result; main.addEventListener('mousemove', (e) => { mouse.style.clipPath = `circle(15em at ${e.offsetX}px`; }); </script>Si lo entiendo correctamente, desea que el enlace se mueva junto con la ruta del clip.
Yo lo haría así:
mouse.style.clipPath = `circle(5em at ${(e.clientX - main.getBoundingClientRect().x)}px`; document.getElementById("anchor").style = "margin-left: " + (e.clientX - main.getBoundingClientRect().x) + "px";Esto no utiliza el offsetX, pero a medida que mueve el enlace, el offsetX también se movería (por lo que permanecería igual), a menos que deshabilite los eventos de puntero para el enlace (lo que podría no ser intencionado).