7

Имеется ли возможность отображать текст под картинкой, когда поверх картинки находится определенный div?

Например, я хотел бы, чтобы в данном примере текст был заслонен тегом с классом image(или картинкой в img), но отображался, когда над ним находится тег с классом overlay(исключительно тот текст, который под overlay):

.box {
  width: 100vw;
  height: 100vw;
  
  position: relative;
  
  background: blue;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image {
  z-index: 10;
 
  width: 75%;
  height: 75%;
  
  background: green;
}

p {
  width: 85%;
  z-index: 1;
  margin: 0 20px;
  color: yellow;
}

.overlay {
  z-index: 99;
  
  width: 50%;
  height: 50%;
  background: white;
}
<div class="box">
  <div class="image centered"></div>
  <p class="centered">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
  </p>
  
  <div class="overlay centered"></div>
</div>

Это реализуемо?

0

2 ответа 2

9

Не сразу понял суть вопроса. Вы имели в виду дырку в центре блока? Она делается так:

* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: blue; }

.centered { position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%); }
.image {
  z-index: 1; width: 75%; height: 75%; background: green;
  clip-path: polygon(  0%  0%,  50%   0%, 50%  10%,
                      10% 10%,  10%  90%, 90%  90%,
                      90% 10%,  50%  10%, 50%   0%,
                     100%  0%, 100% 100%,  0% 100%);
}

p { width: 85%; margin: 0 20px; color: yellow; }
<div class="box">
  <div class="image centered"></div>
  <p class="centered">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
  </p>
</div>

А если нужна обрезка именно по картинке, такую обрезку можно сделать, например, так:

* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: blue; }

.centered { position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%); }
.image {
  z-index: 1; width: 75%; height: 75%; background: green;
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg) 50% repeat;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg)  50% repeat;
}

p { width: 85%; margin: 0 20px; color: yellow; }
<div class="box">
  <div class="image centered"></div>
  <p class="centered">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
  </p>
</div>

Вот такой вот дуршлаг получается. Подробнее об обрезаниях элементов по маске.

UPDATE

Приделал расчет маски по координатам элементов. Светлый блок двигается Немного подглючивает. Но я если что исправлю.

const image = document.querySelector('.image');
const overlay = document.querySelector('.overlay');
const movableObjects = [ image, overlay ];

const resizeWidth = 5;


let currentAction = 'idle';
let actionObject = null;

window.addEventListener('mousemove',onmousemove, false);
window.addEventListener('mousedown', onmousedown, false);
window.addEventListener('mouseup', onmouseup, false);
window.addEventListener('blur', onmouseup, false);

recalculateClip();

/**
 * @function onmousemove
 */
function onmousemove(e){
  const { clientX: cx, clientY: cy } = e;
  const target = document.elementFromPoint(cx,cy);
  // console.log(e);
  if('idle' == currentAction){
if(movableObjects.includes(target)) {
  const { left:ox, top:oy, width:ow, height:oh } = target.getBoundingClientRect();
  // В зависимости от положения курсора относительно объекта выбираем картинку курсора
  target.style.cursor = 
    (cx-ox < resizeWidth && cy-oy < resizeWidth) ? 'nw-resize' :
    (cx-ox < resizeWidth && oy+oh-cy < resizeWidth) ? 'sw-resize' :
    (ox+ow-cx < resizeWidth && cy-oy < resizeWidth) ? 'ne-resize' :
    (ox+ow-cx < resizeWidth && oy+oh-cy < resizeWidth) ? 'se-resize' :
    (cx-ox < resizeWidth) ? 'w-resize' :
    (ox+ow-cx < resizeWidth) ? 'e-resize' : 
    (cy-oy < resizeWidth) ? 'n-resize' : 
    (oy+oh-cy < resizeWidth) ? 's-resize' : 
    'move';
}
  }
  else if('move' == currentAction) {
// Перемещение
actionObject.style.left = (actionObject.offsetLeft + e.movementX)+'px';
actionObject.style.top = (actionObject.offsetTop + e.movementY)+'px';
  }
  else if('n-resize' == currentAction){
// Ресайз вверх
actionObject.style.top = (actionObject.offsetTop + e.movementY)+'px';
actionObject.style.height = (actionObject.offsetHeight - e.movementY)+'px';
  }
  else if('w-resize' == currentAction){
// Ресайз влево
actionObject.style.left = (actionObject.offsetLeft + e.movementX)+'px';
actionObject.style.width = (actionObject.offsetWidth - e.movementX)+'px';
  }
  else if('e-resize' == currentAction){
// Ресайз вправо
actionObject.style.width = (actionObject.offsetWidth + e.movementX)+'px';
  }
  else if('s-resize' == currentAction){
// Ресайз вниз
actionObject.style.height = (actionObject.offsetHeight + e.movementY)+'px';
  }
  else if('nw-resize' == currentAction){
// Ресайз влево-вверх
actionObject.style.left = (actionObject.offsetLeft + e.movementX)+'px';
actionObject.style.top = (actionObject.offsetTop + e.movementY)+'px';
actionObject.style.width = (actionObject.offsetWidth - e.movementX)+'px';
actionObject.style.height = (actionObject.offsetHeight - e.movementY)+'px';
  }
  else if('ne-resize' == currentAction){
// Ресайз вправо-вверх
actionObject.style.top = (actionObject.offsetTop + e.movementY)+'px';
actionObject.style.height = (actionObject.offsetHeight - e.movementY)+'px';
actionObject.style.width = (actionObject.offsetWidth + e.movementX)+'px';
  }
  else if('se-resize' == currentAction){
// Ресайз вправо-вниз
actionObject.style.height = (actionObject.offsetHeight + e.movementY)+'px';
actionObject.style.width = (actionObject.offsetWidth + e.movementX)+'px';
  }
  else if('sw-resize' == currentAction){
// Ресайз влево-вниз
actionObject.style.left = (actionObject.offsetLeft + e.movementX)+'px';
actionObject.style.height = (actionObject.offsetHeight + e.movementY)+'px';
actionObject.style.width = (actionObject.offsetWidth - e.movementX)+'px';
  }
  else {
return;
  }
  recalculateClip();
}

/**
 * @function onmousedown
 */
  function onmousedown(e){
  const {clientX: cx, clientY: cy} = e;
  const target = document.elementFromPoint(cx,cy);
  const { left:ox, top:oy, width:ow, height:oh } = target.getBoundingClientRect();
  //console.log('mousedown', e);
  //console.log('target', target);
  if(movableObjects.includes(target)){

// В зависимости от положения курсора относительно объекта выбор действия
currentAction = (cx-ox < resizeWidth && cy-oy < resizeWidth) ? 'nw-resize' :
                (cx-ox < resizeWidth && oy+oh-cy < resizeWidth) ? 'sw-resize' :
                (ox+ow-cx < resizeWidth && cy-oy < resizeWidth) ? 'ne-resize' :
                (ox+ow-cx < resizeWidth && oy+oh-cy < resizeWidth) ? 'se-resize' :
                (cx-ox < resizeWidth) ? 'w-resize' :
                (ox+ow-cx < resizeWidth) ? 'e-resize' : 
                (cy-oy < resizeWidth) ? 'n-resize' : 
                (oy+oh-cy < resizeWidth) ? 's-resize' : 
                'move';
//                
actionObject = target;
//console.log('currentAction',currentAction);
  }
}

/**
 * @function onmouseup
 */
function onmouseup(e){
  actionObject = null;
  currentAction = 'idle';
  recalculateClip();
}

/**
 * Пересчитать обрезку картинки
 * @function recalculateClip
 */ 
function recalculateClip(){
  const { offsetLeft: x1, offsetTop:y1, offsetWidth:w1, offsetHeight:h1} = overlay;
  let   { offsetLeft: x2, offsetTop:y2, offsetWidth:w2, offsetHeight:h2} = image;
  // Это костыль решает проблему из-за строчки CSS translate(-50%,-50%)
  [ x2, y2 ] = [x2 - ~~(w2/2),y2 - ~~(h2/2)];
  // Расчет точек
  const points = getClipPoints( x1, y1, w1, h1, x2, y2, w2, h2 );
  //console.log('points', points);
  // Преобразование в полигон
  const polygon = `polygon(${points.map(([x,y]) => `${x}px ${y}px`).join(',')})`;
  //console.log('polygon', polygon);
  // Применяем стили
  image.style.clipPath = polygon;
}

/**
 * Получить точки обрезки картинки
 * @function getClipPoints
 * @param x1 {Number} смещение overlay от левой границы страницы в пикселях
 * @param y1 {Number} смещение overlay от верхней границы страницы в пикселях
 * @param w1 {Number} ширина overlay в пикселях
 * @param h1 {Number} высота overlay в пикселях
 * @param x2 {Number} смещение картинки от левой границы страницы в пикселях
 * @param y2 {Number} смещение картинки от верхней границы страницы в пикселях
 * @param w2 {Number} ширина картинки в пикселях
 * @param h2 {Number} высота картинки в пикселях
 * @return {Array([x,y])} возвращает массив точек обрезки картинки 
 */ 
function getClipPoints( x1, y1, w1, h1, x2, y2, w2, h2 ){
  
  // Небольшая проверка типов "на isNaN-ку"
  if([x1, y1, w1, h1, x2, y2, w2, h2].some(isNaN)){
throw TypeError('Функция getClipPoints принимает только численные параметры');
  }
  
  // xw1 - отступ слева + ширина overlay (правая граница)
  // yh1 - отступ сверху + высота overlay (нижняя граница)
  // xw2 - отступ слева + ширина картинки (правая граница)
  // yh2 - отступ сверху + высота картинки (нижняя граница)
  const [xw1,yh1,xw2,yh2] = [x1+w1,y1+h1,x2+w2,y2+h2];

  // Проверка на отрицательные значения как выяснилось, не нужна
  
  // Если элементы не пересекаются
  if( xw1 < x2 || xw2 < x1 || yh1 < y2 || yh2 < y1 ){
return [ [   0,   0 ],   // начальная точка обрезки 
          [  w2,   0 ],   // двигаемся вправо на ширину картинки
          [  w2,  h2 ],   // двигаемся вниз на высоту картинки
          [   0,  h2 ],   // двигаемся влево на ширину картинки
          [   0,   0 ] ]; // двигаемся вверх на начальную точку
  }

  //       x1   x2  xw2  xw1
  //    y1 ┌──────────────┐
  //       │              │                  
  //    y2 │    ╔════╗    │         
  //       │    ║    ║    │    
  //   yh2 │    ╚════╝    │
  //       │              │     
  //   yh1 └──────────────┘ 
  // Если overlay полностью накрывает картинку
  if( x1 <= x2 && xw2 <= xw1 && y1 <= y2 && yh2 <= yh1 ){
return [ [ 0, 0 ] ]; // отправляем одну координату
  } 

  //       x2   x1  xw1  xw2
  //    y2 ╔══════════════╗
  //       ║              ║
  //    y1 ║    ┌────┐    ║
  //       ║    │    │    ║
  //   yh1 ║    └────┘    ║
  //       ║              ║
  //   yh2 ╚══════════════╝
  // Если overlay полностью утонул в картинке
  if( x2 <= x1 && xw1 <= xw2 && y2 <= y1 && yh1 <= yh2){
return [ [        0,        0 ],   // начальная точка обрезки 
          [  x1 - x2,        0 ],   // движемся вправо до левой границы overlay
          [  x1 - x2, yh1 - y2 ],   // движемся вниз до нижней границы overlay
          [ xw1 - x2, yh1 - y2 ],   // движемся вправо до правой границы overlay 
          [ xw1 - x2,  y1 - y2 ],   // движемся вверх до верхней границы overlay
          [  x1 - x2,  y1 - y2 ],   // движемся влево до левой границы overlay
          [  x1 - x2,        0 ],   // движемся вверх до верхней границы картинки
          [       w2,        0 ],   // движемся вправо до правой границы картинки
          [       w2,       h2 ],   // движемся вниз до нижней границы картинки
          [        0,       h2 ],   // движемся влево до левой границы картинки
          [        0,        0 ] ]; // движемся вверх до начальной точки обрезки
  }

  //       x1   x2  xw2  xw1
  //    y2      ╔════╗
  //            ║    ║
  //    y1 ┌────╫────╫────┐
  //       │    ║    ║    │
  //   yh1 └────╫────╫────┘
  //            ║    ║
  //   yh2      ╚════╝
  // Если overlay делит картинку по горизонтали на две части
  if( x1 <= x2 && xw2 <= xw1 && y2 <= y1 && yh1 <= yh2 ){
return [ [  0,        0 ],   // начальная точка обрезки
          [ w2,        0 ],   // движемся вправо до правой границы картинки
          [ w2,  y1 - y2 ],   // движемся вниз до верхней границы overlay
          [  0,  y1 - y2 ],   // движемся влево до левой границы картинки
          [  0, yh1 - y2 ],   // движемся вниз до нижней границы overlay
          [ w2, yh1 - y2 ],   // движемся вправо до правой границы картинки
          [ w2,       h2 ],   // движемся вниз до нижней границы картинки
          [  0,       h2 ],   // движемся влево до левой границы картинки
          [  0,        0 ] ]; // движемся вверх до начальной точки обрезки
  }

  //       x2   x1  xw1  xw2
  //    y1      ┌────┐
  //            │    │
  //    y2 ╔════╪════╪════╗
  //       ║    │    │    ║
  //   yh2 ╚════╪════╪════╝
  //            │    │
  //   yh1      └────┘
  // Если overlay делит картинку по вертикали на две части
  if( x2 <= x1 && xw1 <= xw2 && y1 <= y2 && yh2 <= yh1 ){
return [[        0,  0 ],   // начальная точка обрезки
        [  x1 - x2,  0 ],   // движемся вправо до левой границы overlay
        [  x1 - x2, h2 ],   // движемся вниз до нижней границы картинки
        [ xw1 - x2, h2 ],   // движемся вправо до правой границы overlay
        [ xw1 - x2,  0 ],   // движемся вверх до верхней границы картинки
        [       w2,  0 ],   // движемся вправо до правой границы картинки
        [       w2, h2 ],   // движемся вниз до нижней границы картинки
        [        0, h2 ],   // движемся влево до левой границы картинки
        [        0,  0 ] ]; // движемся вверх до начальной точки обрезки
  }
  //       x1   x2  xw1  xw2              
  //    y1 ┌─────────┐ 
  //       │         │ 
  //    y2 │    ╔════╪════╗     
  //       │    ║    │    ║      
  //   yh1 └────╫────┘    ║        
  //            ║         ║              
  //   yh2      ╚═════════╝ 
  // Если overlay перекрывает верхний левый угол
  if( x1 <= x2 && x2 <= xw1 && xw1 <= xw2 && y1 <= y2 && y2 <= yh1 && yh1 <= yh2 ){
return [ [        0, yh1 - y2 ],  // начало
          [ xw1 - x2, yh1 - y2 ],  // вправо
          [ xw1 - x2,        0 ],  // вверх
          [       w2,        0 ],  // вправо
          [       w2,       h2 ],  // вниз
          [        0,       h2 ],  // влево
          [        0, yh1 - y2 ]]; // вверх
  }

  //       x2   x1  xw2  xw1                                  
  //    y2 ╔═════════╗                   
  //       ║         ║                   
  //    y1 ║    ┌────╫────┐              
  //       ║    │    ║    │              
  //   yh2 ╚════╪════╝    │              
  //            │         │             
  //   yh1      └─────────┘
  // Если overlay перекрывает нижний правый угол
  if( x2 <= x1 && x1 <= xw2 && xw2 <= xw1 && y2 <= y1 && y1 <= yh2 && yh2 <= yh1 ){
return [ [       0,       0 ],   // начало
          [      w2,       0 ],   // вправо
          [      w2, y1 - y2 ],   // вниз
          [ x1 - x2, y1 - y2 ],   // влево
          [ x1 - x2,      h2 ],   // вниз
          [       0,      h2 ],   // влево
          [       0,       0 ] ]; // вверх
  }

  //       x2   x1  xw2  xw1                                   
  //    y1      ┌─────────┐             
  //            │         │             
  //    y2 ╔════╪════╗    │             
  //       ║    │    ║    │             
  //   yh1 ║    └────╫────┘             
  //       ║         ║                  
  //   yh2 ╚═════════╝       
  //  Если overlay перекрывает верхний правый угол
  if( x2 <= x1 && x1 <= xw2 && xw2 <= xw1 && y1 <= y2 && y2 <= yh1 && yh1 <= yh2 ){
return [ [       0,        0 ],   // начало
          [ x1 - x2,        0 ],   // вправо
          [ x1 - x2, yh1 - y2 ],   // вниз
          [      w2, yh1 - y2 ],   // вправо
          [      w2,       h2 ],   // вниз
          [       0,       h2 ],   // влево
          [       0,        0 ] ]; // вверх
  }
  
  //       x1   x2  xw1  xw2
  //    y2      ╔═════════╗             
  //            ║         ║             
  //    y1 ┌────╫────┐    ║             
  //       │    ║    │    ║             
  //   yh2 │    ╚════╪════╝             
  //       │         │                  
  //   yh1 └─────────┘
  // Если overlay перекрывает нижний левый угол
  if( x1 <= x2 && x2 <= xw1 && xw1 <= xw2 && y2 <= y1 && y1 <= yh2 && yh2 <= yh1 ){
return [ [        0,       0 ],   // начало
          [       w2,       0 ],   // вправо
          [       w2,      h2 ],   // вниз
          [ xw1 - x2,      h2 ],   // влево
          [ xw1 - x2, y1 - y2 ],   // вверх
          [        0, y1 - y2 ],   // влево
          [        0,       0 ] ]; // вверх
  }

  //       x2   x1  xw2  xw1                  
  //    y2 ╔═════════╗                  
  //       ║         ║                  
  //    y1 ║    ┌────╫────┐             
  //       ║    │    ║    │             
  //   yh1 ║    └────╫────┘             
  //       ║         ║                  
  //   yh2 ╚═════════╝
  // Если overlay перекрывает часть картинки справа
  if( x2 <= x1 && x1 <= xw2 && xw2 <= xw1 && y2 <= y1 && yh1 <= yh2 ){
return [ [       0,        0 ],    // начало
          [      w2,        0 ],    // вправо
          [      w2,  y1 - y2 ],    // вниз
          [ x1 - x2,  y1 - y2 ],    // влево
          [ x1 - x2, yh1 - y2 ],    // вниз
          [      w2, yh1 - y2 ],    // вправо
          [      w2,       h2 ],    // вниз
          [       0,       h2 ],    // влево
          [       0,        0 ] ];  // вверх
  }
  
  //       x1   x2  xw1  xw2 
  //    y2      ╔═════════╗             
  //            ║         ║             
  //    y1 ┌────╫────┐    ║             
  //       │    ║    │    ║             
  //   yh1 └────╫────┘    ║             
  //            ║         ║             
  //   yh2      ╚═════════╝  
  // Если overlay перекрывает часть картинки слева 
  if( x1 <= x2 && x2 <= xw1 && xw1 <= xw2 && y2 <= y1 && yh1 <= yh2 ){
return [ [        0,        0 ],   // начало
          [       w2,        0 ],   // вправо
          [       w2,       h2 ],   // вниз
          [        0,       h2 ],   // влево
          [        0, yh1 - y2 ],   // вверх
          [ xw1 - x2, yh1 - y2 ],   // вправо
          [ xw1 - x2,  y1 - y2 ],   // вверх
          [        0,  y1 - y2 ],   // влево
          [        0,        0 ] ]; // вверх
  }

  //       x2   x1  xw1  xw2
  //    y2 ╔══════════════╗                  
  //       ║              ║                  
  //    y1 ║    ┌────┐    ║                  
  //       ║    │    │    ║                  
  //   yh2 ╚════╪════╪════╝                  
  //            │    │                      
  //   yh1      └────┘ 
  // Если overlay перекрывает часть картинки снизу
  if( x2 <= x1 && xw1 <= xw2 && y2 <= y1 && y1 <= yh2 && yh2 <= yh1 ){
return [ [        0,       0 ],   // начало
          [       w2,       0 ],   // вправо
          [       w2,      h2 ],   // вниз
          [ xw1 - x2,      h2 ],   // влево
          [ xw1 - x2, y1 - y2 ],   // вверх
          [  x1 - x2, y1 - y2 ],   // влево
          [  x1 - x2,      h2 ],   // вниз
          [        0,      h2 ],   // влево
          [        0,       0 ] ]; // вверх
  }

  //       x2   x1  xw1  xw2
  //    y1      ┌────┐
  //            │    │    
  //    y2 ╔════╪════╪════╗              
  //       ║    │    │    ║              
  //   yh1 ║    └────┘    ║              
  //       ║              ║              
  //   yh2 ╚══════════════╝ 
  // Если overlay перекрывает часть картинки сверху
  if( x2 <= x1 && xw1 <= xw2 && y1 <= y2 && y2 <= yh1 && yh1 <= yh2 ){
return [ [        0,        0 ],   // начало
          [  x1 - x2,        0 ],   // вправо
          [  x1 - x2, yh1 - y2 ],   // вниз
          [ xw1 - x2, yh1 - y2 ],   // вправо
          [ xw1 - x2,        0 ],   // вверх
          [       w2,        0 ],   // вправо
          [       w2,       h2 ],   // вниз
          [        0,       h2 ],   // влево
          [        0,        0 ] ]; // вверх
  }

  //       x1   x2  xw1  xw2             
  //    y1 ┌─────────┐                  
  //       │         │                  
  //    y2 │    ╔════╪════╗              
  //       │    ║    │    ║              
  //   yh2 │    ╚════╪════╝              
  //       │         │                  
  //   yh1 └─────────┘   
  // Если overlay перекрывает полную часть картинки слева
  if( x1 <= x2 && x2 <= xw1 && xw1 <= xw2 && y1 <= y2 && yh2 <= yh1 ){
return [ [ xw1 - x2,  0 ],  // начало
          [       w2,  0 ],  // вправо
          [       w2, h2 ],  // вниз
          [ xw1 - x2, h2 ],  // влево
          [ xw1 - x2,  0 ]]; // вверх
  }
  
  //       x2   x1  xw2  xw1  
  //    y1      ┌─────────┐             
  //            │         │             
  //    y2 ╔════╪════╗    │             
  //       ║    │    ║    │             
  //   yh2 ╚════╪════╝    │             
  //            │         │             
  //   yh1      └─────────┘   
  // Если overlay перекрывает полную часть картинки справа
  if( x2 <= x1 && x1 <= xw2 && xw2 <= xw1 && y1 <= y2 && yh2 <= yh1 ){
return [ [       0,  0 ],   // начало
          [ x1 - x2,  0 ],   // вправо
          [ x1 - x2, h2 ],   // вниз
          [       0, h2 ],   // влево
          [       0,  0 ]];  // вверх
  }

  //       x1   x2  xw2  xw1          
  //    y1 ┌──────────────┐                  
  //       │              │                  
  //    y2 │    ╔════╗    │                  
  //       │    ║    ║    │                  
  //   yh1 └────╫────╫────┘                  
  //            ║    ║                  
  //   yh2      ╚════╝                  
  //                  
  // Если overlay перекрывает полную часть картинки сверху
  if( x1 <= x2 && xw2 <= xw1 && y1 <= y2 && y2 <= yh1 && yh1 <= yh2 ){
return [ [  0, yh1 - y2 ],   // начало
          [ w2, yh1 - y2 ],   // вправо
          [ w2,       h2 ],   // вниз
          [  0,       h2 ],   // влево
          [  0, yh1 - y2 ] ]; // вверх
  }
  
  //       x1   x2  xw2  xw1                            
  //    y2      ╔════╗                   
  //            ║    ║                   
  //    y1 ┌────╫────╫────┐                  
  //       │    ║    ║    │                  
  //   yh2 │    ╚════╝    │                  
  //       │              │                  
  //   yh1 └──────────────┘     
  // Если overlay перекрывает полную часть картинки снизу
  if( x1 <= x2 && xw2 <= xw1 && y2 <= y1 && y1 <= yh2 && yh2 <= yh1 ){
return [ [   0,     0 ],   // начало
          [  w2,     0 ],   // вправо
          [  w2, y1-y2 ],   // вниз
          [   0, y1-y2 ],   // влево
          [   0,     0 ] ]; // вверх
  }

  //throw new ReferenceError('Это было невозможно, но почему-то случилось');

  // Отправляем маску как будто overlay не пересекается с картинкой
  return [ [   0,   0 ],   // начало
        [  w2,   0 ],   // вправо
        [  w2,  h2 ],   // вниз
        [   0,  h2 ],   // влево
        [   0,   0 ] ]; // вверх

}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: blue; }

.centered { position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%); }
.image {
  z-index: 1; width: 75%; height: 75%; background: green;
  clip-path: polygon(  0%  0%,  50%   0%, 50%  10%,
                      10% 10%,  10%  90%, 90%  90%,
                      90% 10%,  50%  10%, 50%   0%,
                     100%  0%, 100% 100%,  0% 100%);
}

.overlay {
  width: 30vw;
  height: 30vh;
  cursor:move;
  background: #fff4;
  position: absolute;
  top: 10vw;
  left: 35vw;
  z-index:2;
}

p { 
  width: 85%; 
  margin: 0 20px; 
  color: yellow; 
  user-select: none;
  pointer-events: none;
}
<div class="image centered"></div>
<p class="centered">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
</p>
</div>

<div class="overlay"></div>

15
  • Сразу извиняюсь если задал вопрос запутанно. Необходима не просто дырка в центре блока или маска(которые нельзя передвигать для анимации), а чтобы на месте условного overlay была дырка, через которую видно текст
    – Mark
    Commented 26 нояб. 2020 в 5:37
  • Грубо говоря сделать(и динамически обновлять, если overlay переместился) на месте overlay дырку, как та, которая была сделана в вашем первом примере с clip-path.
    – Mark
    Commented 26 нояб. 2020 в 5:39
  • Я пытался высчитывать координаты overlay и исходя из них менять clip-path, но производительно это у меня не вышло
    – Mark
    Commented 26 нояб. 2020 в 5:43
  • Можно проецировать canvas на overlay. Но контент будет не-юзабельным.
    – DiD
    Commented 26 нояб. 2020 в 5:47
  • Не страшно, если текст нельзя будет выбирать. Буду рад, если подскажете: как может выглядить пример на канвасе\где можно найти гайды?
    – Mark
    Commented 26 нояб. 2020 в 5:52
3

Немного оптимизировал скрипт. Старый вариант оставлю для академических целей. Мой ответ не получилось отредактировать так, чтобы добавить новый код, при этом не удаляя старый, так как пост выходит за рамки максимального объема ответа.

Постарался прокомментировать код. Алгоритм стал более стабильным и менее огромным. Без комментариев легко умещается в 100 строк кода JS.

/**
 * Картинка, перекрывающая текст
 * @type {Element}
 */
const image = document.querySelector('.image');
/**
 * Слой, делающий картинку прозрачной
 * @type {Element}
 */
const overlay = document.querySelector('.overlay');
/**
 * Массив, содержащий список активных элементов 
 *
 * Активные элементы - это те, которые могут двигаться и изменять размер
 * @type {Array(Element)}
 */
const activeElements = [ image, overlay ];
/**
 * Количество пикселей от края границы элемента, позволяющее изменять размер элемента
 * @type {Number}
 */
const resizeWidth = 5;

/** 
 * Карта изменения размера
 *
 * Ключами карты является зоны положения курсора:
 *   - n  - вверхняя грань, 
 *   - s  - нижняя грань, 
 *   - w  - левая грань, 
 *   - e  - правая грань,
 *   - nw - верхний левый угол, 
 *   - ne - верхний правый угол,
 *   - sw - нижний левый угол, 
 *   - se - нижний правый угол
 * 
 * Состоит из 6 коэфициентов:
 *   - cx - горизонтальное положение курсора,
 *   - ox - левый отступ элемента,
 *   - ow - ширина элемента,
 *   - cy - вертикальное положение курсора,
 *   - oy - верхний отступ элемента,
 *   - oh - высота элемента.
 * 
 * Значения:
 *   1 - изменение значения прямо влияет на свойство
 *   0 - изменение значения не влияет на свойство
 *  -1 - изменение значения обратно влияет на свойство
 *
 * Например: перетаскивание левой границы курсора:
 *   прямо влияет на левый отступ элемента,
 *   обратно влияет на ширину элемента,
 *   не влияет на верхний отступ элемента и на высоту элемента,
 *
 * Выражаясь русским языком, для левой границы от увеличения позиции курсора 
 * по оси Х увеличивается левый отступ элемента и уменьшается ширина элемента,
 * соответственно, от уменьшения позиции курсора по оси X уменьшается левый 
 * отступ элемента и увеличивается ширина элемента, а изменение позиции курсора
 * по оси Y отражаться на свойствах не должно.
 *
 * @type {Map(String:Array[6])}
 */
const resizeMap = new Map([
  ['ne',[-1, 1, 1, 1,-1, 0]],['nw',[ 1,-1, 0, 1,-1, 0]],
  ['se',[-1, 1, 1,-1, 1, 1]],['sw',[ 1,-1, 0,-1, 1, 1]],
  [ 'n',[ 0, 0, 0, 1,-1, 0]],[ 'w',[ 1,-1, 0, 0, 0, 0]],
  [ 's',[ 0, 0, 0,-1, 1, 1]],[ 'e',[-1, 1, 1, 0, 0, 0]],
]);

/**
 * Карта вычисления периметра rectA - rectB
 * @type {Map(Number:BigInt)}
 */
const minusMap = new Map([
  [0x8787,           0n], [0x2d2d,0x8bfea8451an], 
  [0x2d8d,  0x8bfc4518n], [0x272d,  0x46ab7518n],
  [0x872d,  0x46237518n], [0x2d27,  0x45dea918n], 
  [0x2d87,  0x45dc8918n], [0x8d2d,  0x4513fe28n],
  [0x8d8d,   0x3fc4516n], [0x278d,    0x8b7516n],
  [0x2727,    0x46a916n], [0x8d27,    0x45de26n],
  [0x8d87,     0xc45d4n], [0x878d,     0x37514n],
  [0x8727,      0x4624n], [0x2787,      0x8914n],
]);

/**
 * Текущая операция
 * @type {String}
 */
let currentAction = 'idle';

/**
 * Объект операции
 * @type {Element}
 */
let actionElement = null;

/**
 * Обработчик события начала перетаскивания
 */
const startDrag = event => {
  const {clientX: cx, clientY: cy} = event, 
        /* Находим элемент по точке курсора */
        target = document.elementFromPoint(cx,cy),
        /* Извлекаем габариты этого элемента */
        { left:ox, top:oy, width:ow, height:oh } = 
                      target.getBoundingClientRect();
    /* Если элемент под курсором в списке активных элементов ...*/  
  if(activeElements.includes(target)){
    /* ... то устанавливаем текущее действие и элемент */
    [currentAction,actionElement] = [getAction(cx,ox,ow,cy,oy,oh),target];
  }
};
/**
 * Обработчик события завершения перетаскивания
 */
const stopDrag = () => {
  /* Завершаем текущее действие */
  [currentAction,actionElement] = ['idle',null];
  /* Пересчитаем обрезку */
  recalculateClip();
};
/**
 * Сортировщик отступов точек
 */
const sorter = array => array.sort(([a],[b])=>Math.sign(a-b)).map(([,a])=>a).join('');
/**
  * Функция возвращает левый и верхний отступы и ширину и высоту элемента
  * @param 
  */
const offset = el => [el.offsetLeft,el.offsetTop,el.offsetWidth,el.offsetHeight];

/* Включение обработчиков */
[ ['mousemove',onmousemove],
  ['mousedown', startDrag],
  ['mouseup',stopDrag],
  ['blur', stopDrag],
  ['dragstart',e=>e.preventDefault()]
].forEach(([evt,fn])=>window.addEventListener(evt,fn,false));

/* Вызов первоначального обрезания фона перекрывающей картинки */
recalculateClip();

/**
 * Обработчик события движения мышки
 * @param event {Event}
 */
function onmousemove(e){
  const { clientX:cx, clientY:cy, movementX:mx, movementY:my } = event;
  /* Находим элемент по точке курсора */
  const target = document.elementFromPoint(cx,cy);
  /* Если текущее действие - idle (то есть ничего не происходит) */
  if('idle' == currentAction){
    /* Если элемент под курсором в списке активных элементов ...*/
    if(activeElements.includes(target)) {
      const { left:rx, top:ry, width:rw, height:rh } = 
                         target.getBoundingClientRect();
      /* ... то установим актуальное изображение курсора */
      target.style.cursor = getAction(cx,rx,rw,cy,ry,rh);
    }
  }
  /* или что-то происходит */
  else {
    /* Берем габариты текущего элемента */
    const [ol,ot,ow,oh] = offset(actionElement);
    /* Если текущее действие move */
    if('move' == currentAction){
      /* переместим объект */
      Object.assign(actionElement.style, {
        left:`${ol+mx}px`,top:`${ot+my}px`
      });
    }
    /* Для остальных действий */
    else if(/-resize/.test(currentAction)){
      /* Получаем коэфициенты */
      const [_cx,_ox,_ow,_cy,_oy,_oh] = 
        resizeMap.get(currentAction.replace(/-resize/,''));
      /* Устанавливаем свойства */
      Object.assign(actionElement.style,{
        top:   `${ot+(1-_oh)*my*_cy}px`, 
        left:  `${ol+(1-_ow)*mx*_cx}px`,
        height:`${oh+_oy*my}px`,    
         width:`${ow+_ox*mx}px`
      });
    }
  }
  /* Пересчитаем обрезку */
  recalculateClip();
}

/**
 * Расчет операции по координатам курсора
 */
function getAction(cx,ox,ow,cy,oy,oh){
  /* Берем все записи карты изменений размера */
  for([act,[_cx,_ox,_ow,_cy,_oy,_oh]] of resizeMap.entries()){
    /* и сравниваем координаты курсора с каждой зоной */
    if(_cx*cx+_ox*ox+_ow*ow<resizeWidth && _cy*cy+_oy*oy+_oh*oh<resizeWidth){
      /* и если что находим, то получается действие - resize */
      return act+'-resize';
    }
  }
  /* А если ничего не нашли, то дествие - move */
  return 'move';
}

/**
 * Функция пересчитывает обрезку фона картинки
 */
function recalculateClip(){
  /* Габариты элементов image и overlay */
  let [[ix,iy,iw,ih],[ox,oy,ow,oh]] = [offset(image),offset(overlay)];
  /* Это костыль решает проблему из-за строчки CSS translate(-50%,-50%) */
  [ ix, iy ] = [ix - ~~(iw/2),iy - ~~(ih/2)];
  /* Собираем clipPath из полигона с точками */
  image.style.clipPath = `polygon(${ 
     /* Здесь вычисляются точки периметра получаемого из image - overlay
          полигона */
     rectA_minus_rectB(ix,iy,ix+iw,iy+ih,ox,oy,ox+ow,oy+oh) 
       /* далее из абсолютных координат путем вычитания получаем координаты 
         относительно верхней левой точки image */ 
       .map(([cx,cy])=>`${cx-ix}px ${cy-iy}px`).join(',')   
  })`;
}

/** Функция расчета периметра rectA - rectB
 *
 * Функция потребляет 8 параметров: по 4 параметра на каждый rect. 
 * Функция требует абсолютных значений на плоскости.
 * Функция возвращает список точек с абсолютными координатами.
 *
 * @param al {Number} Левая граница rectA
 * @param at {Number} Верхняя граница rectA
 * @param ar {Number} Правая граница rectA
 * @param ab {Number} Нижняя граница rectA
 * @param bl {Number} Левая граница rectB
 * @param bt {Number} Верхняя граница rectB
 * @param br {Number} Правая граница rectB
 * @param bb {Number} Нижняя граница rectB
 * @returns {Array([Number x,Number y])}
 */
function rectA_minus_rectB(al,at,ar,ab,bl,bt,br,bb){
  /* Начальный периметр rectA */
  const rectApts = [[al,at],[ar,at],[ar,ab],[al,ab]];
  /* Если два rect не пересекаются или rectB имеет нулевые размеры */
  if(br<al || ar<bl || bb<at || ab<bt || br==bl || bb==bt)
    /* то возвращаем точки начального периметра rectA */
    return rectApts;
  /* Отсортируем точки периметров и сложим их как число из 8 цифр
     от 0 до 3 в два байта */
  const p = parseInt(sorter([[al,0],[ar,1],[bl,2],[br,3]])+
                     sorter([[at,0],[ab,1],[bt,2],[bb,3]]),4);
  /* Из карты разницы rect получим закодированные точки периметра rectA - rectB */
  let ptsb = minusMap.get(p);
  /* Если не нашли вариант, то снова возвращаем точки начального периметра rectA */
  if(undefined == ptsb) return rectApts;
  /* Первым параметром, занимающим 4 бита, будет количество точек */
  let ptcnt = Number(ptsb & 15n), pts = new Array(ptcnt+1);
  /* Далее каждые 4 бита будут ссылаться на координаты точки: по 2 бита на каждую ось */
  /* Заполняем массив точек из координат */
  for(let i = 0; ptsb >>= 4n, i < ptcnt; i++)
    /* значения координат в левой части - порядок координат извлекаем 
      из того же числа из карты разницы rect */
    pts[i] = [[al,ar,bl,br][Number(ptsb >> 2n & 3n)], 
              [at,ab,bt,bb][Number(ptsb & 3n)] ];
  /* Добавим начальную току в конец списка точек или верхнюю левую точку rectA
     в случае если точки отсутствуют (то есть rectB перекрывает rectA) */
  pts[ptcnt] = ptcnt ? [...pts[0]] : [ al, at ];
  return pts;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: blue; overflow: hidden; }
.centered { position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%); }
.image { z-index: 1; width: 75%; height: 75%; background: green; }
.overlay { width: 30vw; height: 30vh; top: 10vw; left: 35vw; cursor:move;
           z-index:2; background: #fff4; position: absolute; }
p { width: 85%; color: yellow; user-select: none; pointer-events: none; }
<div class="image centered"></div>
<p class="centered">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
</p>
</div>
<div class="overlay"></div>

UPDATE

document.querySelector('.debug').innerHTML = `${document.body.clientWidth}x${document.body.clientHeight}`;
  
  /**
   * Картинка, перекрывающая текст
   * @type {Element}
   */
  const image = document.querySelector('.image');

  /**
   * Слой, делающий картинку прозрачной
   * @type {Element}
   */
  const overlay = document.querySelector('.overlay');
  

  const sourceRatio = 1.5;

  /**
   * Карта вычисления периметра rectA - rectB
   * @type {Map(Number:BigInt)}
   */
  const minusMap = new Map([
    [0x8787,           0n], [0x2d2d,0x8bfea8451an], 
    [0x2d8d,  0x8bfc4518n], [0x272d,  0x46ab7518n],
    [0x872d,  0x46237518n], [0x2d27,  0x45dea918n], 
    [0x2d87,  0x45dc8918n], [0x8d2d,  0x4513fe28n],
    [0x8d8d,   0x3fc4516n], [0x278d,    0x8b7516n],
    [0x2727,    0x46a916n], [0x8d27,    0x45de26n],
    [0x8d87,     0xc45d4n], [0x878d,     0x37514n],
    [0x8727,      0x4624n], [0x2787,      0x8914n],
  ]);
  
  /**
   * Сортировщик отступов точек
   */
  const sorter = array => array.sort(([a],[b])=>Math.sign(a-b)).map(([,a])=>a).join('');
  /**
    * Функция возвращает левый и верхний отступы и ширину и высоту элемента
    * @param 
    */
  const offset = el => [el.offsetLeft,el.offsetTop,el.offsetWidth,el.offsetHeight];
  
  /* Включение обработчиков */
  [ ['mousemove',onmousemove],
    ['mouseenter',onmouseenter],
    ['mouseleave',onmouseleave],
    ['resize',onresize],
  ].forEach(([evt,fn])=>window.addEventListener(evt,fn,false));
  
  /* Вызов первоначального обрезания фона перекрывающей картинки */
  recalculateSize();

  function onmousemove(e){
    let [left,top]=[(e.pageX-108)+'px', (e.pageY-50)+'px'];
    Object.assign(overlay.style,{left,top});
    recalculateClip();
  }
  function onresize(e){
    recalculateSize();
  }

  function recalculateSize(){
    let imageWidth,backgroundPositionX,backgroundPositionY;
    if(image.clientWidth/image.clientHeight > sourceRatio){
      imageWidth = Math.round(image.clientWidth);
      backgroundPositionX = 0;
      backgroundPositionY = (image.clientHeight/2 - image.clientWidth/3)+'px';
    } else {
      imageWidth = Math.round(image.clientHeight * 1.5);
      backgroundPositionX = (image.clientWidth/3 - image.clientHeight/2)+'px';
      backgroundPositionY = 0;
    }
    let backgroundImage = `url("https://unsplash.com/photos/dnEiAHM7MlQ/download?force=true&w=${imageWidth}")`;
    Object.assign(image.style,{backgroundImage,backgroundPositionX,backgroundPositionY});
    Object.assign(overlay.style,{backgroundImage});
    recalculateClip();
  }
  /**
   * Функция пересчитывает обрезку фона картинки
   */
  function recalculateClip(){
    /* Габариты элементов image и overlay */
    let [[ix,iy,iw,ih],[ox,oy,ow,oh]] = [offset(image),offset(overlay)];
    /* Это костыль решает проблему из-за строчки CSS translate(-50%,-50%) */
    [ ix, iy ] = [ix - ~~(iw/2),iy - ~~(ih/2)];
    let [il,it] = iw/ih > sourceRatio ? [0,ih/2-iw/3]:[iw/3-ih/2,0];
    /* Собираем clipPath из полигона с точками */
    image.style.clipPath = `polygon(${ 
       /* Здесь вычисляются точки периметра получаемого из image - overlay
            полигона */
       rectA_minus_rectB(ix,iy,ix+iw,iy+ih,ox,oy,ox+ow,oy+oh) 
         /* далее из абсолютных координат путем вычитания получаем координаты 
           относительно верхней левой точки image */ 
         .map(([cx,cy])=>`${cx-ix}px ${cy-iy}px`).join(',')   
    })`;
    const {max,min} = Math;
    let [xx,xy,xr,xb] = [max(ix,ox),max(iy,oy),min(ix+iw,ox+ow),min(iy+ih,oy+oh)]
    Object.assign(overlay.style,{
      backgroundPositionX:(ix-ox+il)+'px',
      backgroundPositionY:(iy-oy+it)+'px',
      clipPath: `polygon(${xx-ox}px ${xy-oy}px,${xr-ox}px ${xy-oy}px,${xr-ox}px ${xb-oy}px,${xx-ox}px ${xb-oy}px,${xx-ox}px ${xy-oy}px)`
    });
  }
  
  /** Функция расчета периметра rectA - rectB
   *
   * Функция потребляет 8 параметров: по 4 параметра на каждый rect. 
   * Функция требует абсолютных значений на плоскости.
   * Функция возвращает список точек с абсолютными координатами.
   *
   * @param al {Number} Левая граница rectA
   * @param at {Number} Верхняя граница rectA
   * @param ar {Number} Правая граница rectA
   * @param ab {Number} Нижняя граница rectA
   * @param bl {Number} Левая граница rectB
   * @param bt {Number} Верхняя граница rectB
   * @param br {Number} Правая граница rectB
   * @param bb {Number} Нижняя граница rectB
   * @returns {Array([Number x,Number y])}
   */
  function rectA_minus_rectB(al,at,ar,ab,bl,bt,br,bb){
    /* Начальный периметр rectA */
    const rectApts = [[al,at],[ar,at],[ar,ab],[al,ab]];
    /* Если два rect не пересекаются или rectB имеет нулевые размеры */
    if(br<al || ar<bl || bb<at || ab<bt || br==bl || bb==bt)
      /* то возвращаем точки начального периметра rectA */
      return rectApts;
    /* Отсортируем точки периметров и сложим их как число из 8 цифр
       от 0 до 3 в два байта */
    const p = parseInt(sorter([[al,0],[ar,1],[bl,2],[br,3]])+
                       sorter([[at,0],[ab,1],[bt,2],[bb,3]]),4);
    /* Из карты разницы rect получим закодированные точки периметра rectA - rectB */
    let ptsb = minusMap.get(p);
    /* Если не нашли вариант, то снова возвращаем точки начального периметра rectA */
    if(undefined == ptsb) return rectApts;
    /* Первым параметром, занимающим 4 бита, будет количество точек */
    let ptcnt = Number(ptsb & 15n), pts = new Array(ptcnt+1);
    /* Далее каждые 4 бита будут ссылаться на координаты точки: по 2 бита на каждую ось */
    /* Заполняем массив точек из координат */
    for(let i = 0; ptsb >>= 4n, i < ptcnt; i++)
      /* значения координат в левой части - порядок координат извлекаем 
        из того же числа из карты разницы rect */
      pts[i] = [[al,ar,bl,br][Number(ptsb >> 2n & 3n)], 
                [at,ab,bt,bb][Number(ptsb & 3n)] ];
    /* Добавим начальную току в конец списка точек или верхнюю левую точку rectA
       в случае если точки отсутствуют (то есть rectB перекрывает rectA) */
    pts[ptcnt] = ptcnt ? [...pts[0]] : [ al, at ];
    return pts;
  }
* { box-sizing: border-box; }
  body { margin: 0; padding: 0; background: blue; overflow: hidden; height: 100vh; width: 100vw; }
  .debug {left:0;top:0;position:absolute; color: #fff; text-shadow: #000;}
  .centered { position: absolute; left: 50%; top: 50%;
              transform: translate(-50%, -50%); }
  .image { z-index: 1; width: 60vw; height: 60vh;  background-repeat: no-repeat;}
  .overlay { width: 216px; height: 100px;
             z-index:2; 
             top: calc(50vh - 50px);
             left: calc(50vw - 108px);
             background-repeat: no-repeat;
             -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='216'%20height='100'%3E%3Crect%20x1='0'%20y1='0'%20x2='216'%20y2='100'/%3E%3Cpath%20d='m0,0v100h217v-100h-217zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z'%20fill='%23000'/%3E%3C/svg%3E");
             mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='216'%20height='100'%3E%3Crect%20x1='0'%20y1='0'%20x2='216'%20y2='100'/%3E%3Cpath%20d='m0,0v100h217v-100h-217zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z'%20fill='%23000'/%3E%3C/svg%3E");
             mask: url(#mask);
             mask-type: luminance;
             position: absolute;
             transform: scale(1.01); }
  p { width: 85%; color: yellow; user-select: none; pointer-events: none; }
<mask id="mask">
    <path d="m0,0v100h216v-100h-216zm50,0a50,50,0,0,1,43.5,25,30,50,0,0,0,30,0,50,50,0,1,1,0,50,30,50,0,0,0-30,0,50,50,0,1,1-43.5-75zm0,20a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30zm117,0a30,30,0,0,0-30,30,30,30,0,0,0,30,30,30,30,0,0,0,30-30,30,30,0,0,0-30-30z" fill="#000"/>
  </mask>
  <div class="debug"></div>
  <div class="image centered"></div>
  <p class="centered">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo consequuntur ratione quam. Iste nam necessitatibus quasi, consequuntur aspernatur in rem.
  </p>
  </div>
  <div class="overlay"></div>

9
  • Невероятная работа =)
    – Mark
    Commented 18 дек. 2020 в 11:03
  • Уже испробовал и все работает отлично, но столкнулся в странным моментом - нода с border-radius округляется, но создает "дыру" такого же размера как нода без border-radius. i.imgur.com/yxnJwzu.png
    – Mark
    Commented 18 дек. 2020 в 23:39
  • Можете подсказать, возможно ли при нынешней архитектуре учитывать скругления при генерации clipPath?
    – Mark
    Commented 18 дек. 2020 в 23:43
  • Да без проблем, только надо polygon заменить на path. А там уже можно использовать любые формы.
    – DiD
    Commented 19 дек. 2020 в 0:09
  • 1
    @MaximLensky ну, это может быть тип данных либо структура объекта. В JSdoc нет однозначного формата под этот тег devdocs.io/jsdoc/tags-type
    – DiD
    Commented 28 дек. 2020 в 5:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.