有没有办法将变量添加到剪辑路径url？

Question

我想给 Clip-path Musemove Effects。如果是圆，可以在css

中这样给一个var值

    clip-path: circle(40% at var(--x, 50%) var(--y, 50%));

但是我不知道如果url进去怎么输入var值

    clip-path: url(#heart);

有什么解决方法吗？

<script>
const htmlElem = document.documentElement;
document.addEventListener('mousemove', onDocumentMousemove);

function onDocumentMousemove(evt) {
htmlElem.style.setProperty('--x', `${evt.clientX}px`);
htmlElem.style.setProperty('--y', `${evt.clientY}px`);
}
</script>

jsfiddle In the case of circle - It's working.

jsfiddle In the case of url - It's not working.

Answer 1

改用 SVG 作为遮罩。

const htmlElem = document.documentElement;
document.addEventListener('mousemove', onDocumentMousemove);

function onDocumentMousemove(evt) {
  htmlElem.style.setProperty('--x', `${evt.clientX - 100}px`);
  htmlElem.style.setProperty('--y', `${evt.clientY - 100}px`);
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Monaco;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
}

.container {
  position: relative;
  width: 100%;
  --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z" /></svg>' ) ;
  -webkit-mask: var(--m) var(--x, 50%) var(--y, 50%) no-repeat;
          mask: var(--m) var(--x, 50%) var(--y, 50%) no-repeat;
  background-color: blue;
}

img {
 max-width:100%;
}

<div class="container">
  <img src="https://www.typotheque.com/ssadmin/assets/FontImageGenerator/AaImage29.png">
</div>

有没有办法将变量添加到剪辑路径url？

Is there a way to add a variable to the clip-path url?

css

url