Масштабируемый clipPath

11 августа 2019, 11:50

Суть в том, что svg фигура в clipPath отрисовывается как есть, по тем самым размерам, с которыми создана.

Есть ли способ, при котором обрезаемая область масштабировалась бы по размерам блока.

 .img-holder { 
        display: block; 
        position: relative; 
        overflow: hidden; 
        /* По горизонтальной полосе прокрутки окна понимаем, что Ширина блока больше чем  
        область обрезки svg */ 
        width: 1550px; 
        height: 350px; 
    } 
     
    .clip-svg-inlinetv { 
      /* Фактическая ширина фигуры 350px на 250px */ 
        -webkit-clip-path: url("#clip-polygontv"); 
        clip-path: url("#clip-polygontv"); 
    }

 <span class="img-holder clip-svg-inlinetv"> 
          <img src="https://i.stack.imgur.com/VGmV9.jpg" alt=""> 
    </span> 
     
     
    <svg> 
        <defs> 
            <clipPath id="clip-polygontv" > 
                <path d="M338.5,22.5c24.8,75.6,2.1,205.1,0,205.7c-172.1,50.5-328.6-0.4-328.6-0.4c-22.2-102.2,0-205.2,0-205.2 
    		C179.4-27.2,337.8,20.6,338.5,22.5z" /> 
            </clipPath> 
        </defs> 
    </svg>

Demo

Answer 1

Немного теории

clipPathUnits - атрибут указывает, какую систему координат использовать для содержимого элемента <clipPath>.

clipPathUnits="objectBoundingBox"

Это значение указывает, что все координаты внутри элемента <clipPath> относятся к ограничительной рамке элемента, к которому применяется обрезаемый контур. Это означает, что источником системы координат является верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта имеют длину в 1 единицу.

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

<rect width="1" height="1" rx="0.25" />

Чтобы получить масштабируемый clip-path, например при наведении курсора, нужно менять размер изображения в сторону увеличения, соответственно увеличится и clip-path, обрезая это изображение.

img { 
width:25%; 
height:25%; 
clip-path:url(#clip-polygon2); 
transition:2s ; 
} 
img:hover { 
width:50%; 
height:50%; 
 
}

<div class="container"> 
       <img src="https://i-a.d-cd.net/1cda2es-960.jpg" alt=""> 
</div> 
     
    <svg viewBox="0 0 100 100"> 
            <defs> 
                <clipPath id="clip-polygon2"   clipPathUnits="objectBoundingBox" > 
                    <rect width="1" height="1" rx="0.25" ry="0.25" /> 
                </clipPath> 
            </defs> 
     </svg>

Answer 2

Тем не менее, использовал косвенное решение, и даже немного костыльное, которое непосредственно clipPath не масштабирует, однако вопрос решить позволило.

Создаем несколько фигур, задавая их размер сразу при создании в векторном редакторе.
Загружаем в документ под разными id, например, #clip-polygontv, #clip-polygontv2
В CSS для определенного разрешения экрана указываем свой clip-path

@max-width (media: 1920px) { .clip-svg-inlinetv { -webkit-clip-path: url("#clip-polygontv"); clip-path: url("#clip-polygontv"); } }

@max-width (media: 1024px) { .clip-svg-inlinetv { -webkit-clip-path: url("#clip-polygontv2"); clip-path: url("#clip-polygontv2"); } }

Таким образом, обрезаемая область по ходу изменения разрешения экрана будет меняться, благодаря использованию фигур разных размеров.