Как создать криволинейную форму clipPath

#html #css #svg #clip_path

Для обрезки изображения используется clipPath 

//HTML

   


//CSS
.clip-svg-inline2 {
  -webkit-clip-path: url("#clip-polygon2");
  clip-path: url("#clip-polygon2");
}
//SVG



https://jsfiddle.net/oxjatd5q/

Все работает. Но вопрос - возможно ли вместо polygon использовать свою форму, подключить
код из собственного SVG или каким либо еще образом обрезать изображение именно по нарисованной
фигуре. 

Дело в том, что все фигуры clipPath построены на прямых и ломанных, а как нарисовать
там округлое со всех сторон изображение? Картинка в примере с экраном старого телевизора
не случайна, хотелось бы понять, как нарисовать подобный контур, где с каждой стороны
дуги и округлые края.
    

Ответы

Ответ 1

Чтобы получить точный контур, по которому будет вырезаться изображение необходимо
сделать следующие шаги: 


Загрузить картинку в векторный редактор с помощью файла svg и тегов
 




	 





В векторном редакторе 


С помощью инструмента рисовать кривые Безье (цифра 1 на рисунке) нанести на контур
узловые точки   



  


Выделить узловые точки (цифра 2) для появления рычагов управления, с помощью которых
будем корректировать форму кривой
Преобразовать узловые точки в автоматически сглаженные.  
Сохраняем файл в векторном редакторе и забираем из него формулу
патча, которая будет использоваться как clip-path, который точно
повторяет экран TV  


SVG clipPath



.container{
width:100%;
height:100%;
 }
  svg image {
 clip-path:url(#clip1);
}

	 





Вырезаем другую картинку 



.container{
width:100%;
height:100%;
 } 
 svg image {
 clip-path:url(#clip1);
 }







SVG Mask

С масками можно получить более интересные варианты 

Для справки можно почитать статью - Практические примеры применения масок svg

Вырезаем как clipPath, но оставляем полупрозрачным окружающий фон 



.container{
width:100%;
height:100%;
 }


	 

Другой вариант  






В этом варианте вырезается экран и показывается фон, который лежит ниже и одновременно
показывается сам TV. 



.container{
width:100%;
height:100%;
 }

	





Пример с анимацией изображения TV

Добавляются две строчки анимации,- горизонтального и вертикального перемещения фоновой
картинки 


          
           
               




.container{
width:100%;
height:100%;
 }

	



Ответ 2

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




html, body, main {
  margin: 0;
  height: 100%;
}

svg {
  width: 10em;
  float: right;
  position: relative;
  z-index: 1;
}

main {
  background: linear-gradient(to bottom, green, blue);
  clip-path: url(#heart-clip);
}







PS: Данный пример не будет работать в EDGE и IE.


Ответ 3

Пример автора вопроса

Чтобы заработало, нужно было убрать clipPathUnits="objectBoundingBox" так как при
этом параметре путь вычисляется в процентах или в долях от единицы 

Подставил патч, полученный в первом ответе 



.clip-svg-inline2 {
  display: block;
      -webkit-clip-path: url("#clip-polygon2");
      clip-path: url("#clip-polygon2");
    }

       
    
    
     




PS: Данный пример не будет работать в EDGE && IE