3

Суть в том, что 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

3 ответа 3

3

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

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> 

13
  • превосходно! Только одно "но" - как то же самое проделать с path? У меня она вообще не отображается при использовании clipPathUnits (как было в изначальных примерах предыдущего вопроса, если помните)
    – Amsterdam
    17 янв 2019 в 10:34
  • @Amsterdam конечно помню, но у вас уже достаточно много примеров, чтобы проанализировать все варианты и построить свой рабочий вариант. Главное условие патч переводить из пикселей в доли от единицы если используется clipPathUnits="objectBoundingBox" Посмотрите ещё один ответ на эту тему ru.stackoverflow.com/questions/932206/responsive-clip-path 17 янв 2019 в 10:42
  • забавно, совершенно аналогичный вопрос. Но в том примере так же используется фигура. С path тоже используются доли, но получается в итоге белая область. Не могу понять почему jsfiddle.net/w5fc23h4
    – Amsterdam
    17 янв 2019 в 10:59
  • @Amsterdam в примере по вашей ссылке использован clipPathUnits="objectBoundingBox" а path не в долях от единицы. Вы кроме ссылки на другой топик мой комментарий выше не прочли? 17 янв 2019 в 11:03
  • @Amsterdam какая-то сборная солянка в вашем примере rx=0.25 ry=0.25 причём вообще? Это же радиусы для прямоугольника. А у вас патч 17 янв 2019 в 11:07
1

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

  1. Создаем несколько фигур, задавая их размер сразу при создании в векторном редакторе.
  2. Загружаем в документ под разными id, например, #clip-polygontv, #clip-polygontv2
  3. В 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"); } }

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

1
  • нормальное решение (+) 17 янв 2019 в 13:31
0

Как уже выше писали, нужно добавить к <clipPath> атрибут clipPathUnits="objectBoundingBox", и перевести координаты path="" в доли единицы (лично я воспользовался вот этим сервисом - https://yoksel.github.io/relative-clip-path/). Может кому-то поможет :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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