Я хочу, чтобы эта обтравочная маска SVG преобразовывалась относительно ширины и высоты области просмотра браузера.
Я попытался сделать это с помощью Javascript, где я проверяю положение SVG относительно окна и значение области просмотра (vw, vh). Я хочу, чтобы пространство между SVG и правой стороной области просмотра всегда было определенным значением.
Однако приведенный ниже код запускается только один раз, когда позиция SVG меньше, чем vw - 100. Даже после перевода верхнее и левое значения SVG остаются прежними. Итак, каково возможное решение этой проблемы?
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
const svg = document.getElementById('black-hole')
var viewportOffset = svg.getBoundingClientRect();
var top = viewportOffset.top;
var left = viewportOffset.left;
if (left > (vw - 100))
{
svg.style.transform = "translate(" + (left - 200) + "px,"+ top + "px)";
}.red
{
clip-path: url(#myClip);
width: 100vw;
height:100vh;
background-color: red;
background-image: url(./img/project.jpg);
background-size: cover;
position:absolute;
}
#black-hole {
transform-box: fill-box;
transform: translate(18rem,2rem);
transform-origin: center;
}<div class="red"></div>
<svg height="0" width="0">
<clipPath id="myClip" >
<path id="black-hole" xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"/>
</clipPath>
</svg>
