<div></div>
<div id="clickEle"></div>

<svg width="0" height="0">
  <clipPath id="circlePath">
    <circle cx="160" cy="160" r="150" stroke="#000" stroke-width="2" fill="none" />
  </clipPath>
</svg>

body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

div{
  background: url('https://bennettfeely.com/clippy/pics/pittsburgh.jpg'), linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  background-blend-mode: overlay, luminosity, screen, luminosity;
  background-size: cover;
  min-height: 300px;
  border: 2px solid #eee;
  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

#clickEle {
    clip-path: url(#circlePath);
}

let clipPathEle = document.querySelector('#clickEle');


clipPathEle.addEventListener('click', function(){
  alert('clipPath区域会弹出')
})