让 link 跟随剪辑路径

Question

我想弄清楚如何仅在现有剪辑路径的区域内显示可点击的 link。并且还利用现有的 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.whosebug.com");
document.getElementById("anchor").innerHTML = result;
 
main.addEventListener('mousemove', (e) => {
  mouse.style.clipPath = `circle(15em at ${e.offsetX}px`; 
});
</script>

Answer 1

如果我没理解错的话，您希望 link 与剪辑路径一起移动。

我会这样做：

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，但是当您移动 link 时，offsetX 也会一起移动（因此它会保持不变），除非您禁用 link 的指针事件（这可能不是故意的）。

让 link 跟随剪辑路径

Let link follow clippath

javascript

html

css

clip-path