如何实现可点击链接仅在clip-path裁剪区域内显示并使用offsetX值

以下是可直接运行的修复实现，调整点如下：

• 补全了所有容器的基础宽高、定位样式，保证视觉层正常渲染
• 修正了clip-path的语法错误，补全Y轴坐标和闭合括号，同时保留了你需要的offsetX参数
• clip-path原生特性会自动屏蔽裁剪区域外的元素交互，仅区域内的链接可以正常点击，完全匹配需求

<style>
.wrap {
  width: 800px;
  height: 600px;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}
.mouse {
  background-color: aqua;
  position: absolute;
  inset: 0;
}
              
.img {
  background-color: black;
  position: absolute;
  inset: 0;
}

#anchor {
  text-align: center;
  margin-top: 2em;
  font-size: 24px;
}
</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("#");
document.getElementById("anchor").innerHTML = result;
 
main.addEventListener('mousemove', (e) => {
  mouse.style.clipPath = `circle(15em at ${e.offsetX}px ${e.offsetY}px)`; 
});
</script>

内容的提问来源于stack exchange，提问作者LDX