Переместить положение клипа на курсор мыши - PullRequest
Новая
       74

Переместить положение клипа на курсор мыши

1 голос
/ 03 августа 2020

У меня есть форма SVG, которую я использую как clip-path поверх изображения - форма SVG должна соответствовать положению мыши.

Я могу заставить ее работать, если использую clip-path:circle(), но не при использовании clip-path: url(#idOfMask)

Это похоже на то, что я не могу динамически изменять положение клип-пути при использовании SVG в качестве клип-пути .?

clip-path: circle(100px at var(--clip-position) );
//clip-path: url(#mask at var(--clip-position)) ); //Doesnt work


$body.mousemove(function(e){  
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);  
});

Полный код 

//const cImage = document.getElementById('clipped-image');
const $cImg = $('#clipped-image');
const $body = $('body');

$body.mousemove(function(e){  
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);  
});
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  --clip-position: center;
}

body {
  background-color: black;
  margin: 0;
}

.mask-container {
  display: none;
}

@supports (-webkit-clip-path: circle(100px at center)) or (clip-path: circle(100px at center)) {

  .mask-container {
    display: block;
  }
  
  .mask-container img {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    -webkit-clip-path: circle(100px at var(--clip-position) );
    clip-path: circle(100px at var(--clip-position) );
  }
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mask-container">
  <img src="data:image/jpeg;base64,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" alt="Morraine Lake" id="clipped-image">
</div>

Есть идеи, как добиться того же, используя SVG clip-path?

1 Ответ

2 голосов
/ 03 августа 2020

Для этого нужно использовать mask, а не clip-path. Вы определяете размер, а затем регулируете положение. Он работает так же, как и фоновое изображение.

Вот пример c: 

const $cImg = $('#clipped-image');
const $body = $('body');

$body.mousemove(function(e) {
  $cImg.css('--clip-position', `${(e.pageX - 100)}px ${(e.pageY - 100)}px`);
});
:root {
  --clip-position: center;
}

body {
  background-color: black;
  margin: 0;
}

.mask-container img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100vh;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) no-repeat;
  -webkit-mask-size:200px 200px;
  -webkit-mask-position:var(--clip-position);
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) no-repeat;
          mask-size:200px 200px;
          mask-position:var(--clip-position);
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mask-container">
  <img src="data:image/jpeg;base64,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"
    alt="Morraine Lake" id="clipped-image">
</div>
...