让链接跟随剪辑路径答案

【问题标题】：Let link follow clippath让链接跟随剪辑路径
【发布时间】：2021-11-12 17:48:59
【问题描述】：

我试图弄清楚如何仅在现有剪辑路径的区域内显示可点击链接。并且还利用现有的 OffsetX 值。

<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>

【问题讨论】：

codepen.io/snake-py/pen/rNzZOgd我做了笔，所以我理解正确吗 - 你想让链接随着偏移量移动吗？
是的。我试图让链接以相同的偏移量“停留”在圆圈内。

标签： javascript html css clip-path

【解决方案1】：

如果我理解正确，您希望链接与剪辑路径一起移动。

我会这样做：

mouse.style.clipPath = `circle(5em at ${(e.clientX - main.getBoundingClientRect().x)}px`; 
document.getElementById("anchor").style = "margin-left: " + (e.clientX - main.getBoundingClientRect().x) + "px";

这不使用 offsetX，但是当您移动链接时，offsetX 也会随之移动（因此它会保持不变），除非您禁用链接的指针事件（这可能不是有意的）。

【讨论】：