svg clip-path для блока на весь экран с пропорциями

#css #html5 #svg #анимация

Пытаюсь использовать svg clip-path для картинки:



* {
  box-sizing:border-box;
}

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

.box {
  width: 100%;
  height: 100%;
  position: relative;
  
  background: rgba(74,92,18,1);
  background: -moz-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,92,18,1)),
color-stop(39%, rgba(74,92,18,1)), color-stop(100%, rgba(36,43,9,1)));
  background: -webkit-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1)
39%, rgba(36,43,9,1) 100%);
  background: -o-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -ms-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: linear-gradient(to bottom, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);

}


#maskandgif{
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  
  
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit:cover;
  -webkit-clip-path: url(#clip-path);
  clip-path: url(#clip-path);
}
  

      
      

        
      
  




Но ничего не отображается.

clipPathUnits="objectBoundingBox - не помогает, а даже наоборот.

Вопрос: Как правильно задать clip-path svg для блока или медиа объекта, пропорционально
и на всю высоту и ширину?
    

Ответы

Ответ 1

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


Есть картинка из которой нужно будет вырезать клип в форме ёлочки  


  

Размеры картинки 600х338px; 


Для прорисовки clipPath, который будет согласован по размерам и
позицией расположения на картинке, пишем простенький файл:









Открываем его с помощью векторного редактора и инструментом- "Рисовать кривые Безье
и прямые линии" рисуем контур: 

 


Сохраняем файл и забираем из него патч контура ёлочки    


Этот патч будет использоваться в качестве clip=path для вырезания контура ёлочки
из картинки 








Для получения адаптированного изображения убираем фиксированные размеры в пикселях,
оборачиваем SVG дивом в котором и задаем проценты ширины и высоты 



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







Update 

Для clip-path, mask годен только svg c одинарными линиями.  

svg контуры, нарисованные в векторном редакторе лепкой, калиграфическим пером не
будут работать в качестве clip=path и `mask так как у них двойные контуры 



Смотрите хороший ответ  Павла Варшавского, который демонстрирует это.  

Вырезается пространство только между двумя соседними контурами, а внутри нет


Ответ 2

Вот о чём я говорил что ваша ёлочка имеет маленький размер и потому её не было видно 
так же я добавил xmlns:xlink="http://www.w3.org/1999/xlink что позволяет работать
с ссылками в svg вот ваша елочка 

В данном случае viewBox не имеет значения так как он не работает с clip-path


* {
  box-sizing:border-box;
}

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

.box {
  width: 100%;
  height: 100%;
  position: relative;
  
  background: rgba(74,92,18,1);
  background: -moz-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,92,18,1)),
color-stop(39%, rgba(74,92,18,1)), color-stop(100%, rgba(36,43,9,1)));
  background: -webkit-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1)
39%, rgba(36,43,9,1) 100%);
  background: -o-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -ms-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: linear-gradient(to bottom, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);

}


#maskandgif{
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  
  
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit:cover;
  -webkit-clip-path: url(#clip-path);
  clip-path: url(#clip-path);
}
  

      
      

        
      
  


Ответ 3

Решил, чтобы не мешать всё в одну кучу и не запутать дать второй ответ. 

Вся структура взята из вопроса автора. clipPath взят из моего первого ответа. 

При такой технике приходится немного позиционировать clipPath: увеличивать и сдвигать 


      
      

        
      
  




Анимация клипа



* {
  box-sizing:border-box;
}

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

.box {
  width: 100%;
  height: 100%;
  position: relative;
  
  background: rgba(74,92,18,1);
  background: -moz-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,92,18,1)),
color-stop(39%, rgba(74,92,18,1)), color-stop(100%, rgba(36,43,9,1)));
  background: -webkit-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1)
39%, rgba(36,43,9,1) 100%);
  background: -o-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: -ms-linear-gradient(top, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);
  background: linear-gradient(to bottom, rgba(74,92,18,1) 0%, rgba(74,92,18,1) 39%,
rgba(36,43,9,1) 100%);

}


#maskandgif{
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  
  
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit:cover;
  -webkit-clip-path: url(#clip-path);
  clip-path: url(#clip-path);
}