Responsive clip-path

#css #css3 #svg #адаптивная_верстка #clip_path

В следующем примере блок main (синезелёный градиент) обрезается при помощи clip-path
и принимает форму сердечка. Однако видно, что он обрезается в масштабе 1:1, а хотелось
бы, чтобы форма обрезки растягивалась по размеру блока (по аналогии с тем, как у background-size
работает cover, contain или 100% 100%).

https://jsfiddle.net/a5goLyds/



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);
}






    

Ответы

Ответ 1

К сожалению я не нашёл clip-path генераторов, которые позволяли бы рисовать кривыми
линиями. 

Есть генераторы, которые рисуют прямыми линиями по узловым точкам:


https://codepen.io/jh3y/pen/XqVQqa 
http://bennettfeely.com/clippy/     


Для многоугольника получаю вот такие значения

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%,
0% 70%, 0% 35%, 20% 10%);  


Преобразую для svg clip-path в доли от единицы:

  


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



svg {}

main {
  width: 15%;
  height: 15%;
  background: linear-gradient(to bottom, green, blue);
  clip-path: url(#heart-clip);
  transition: 1s;
}

main:hover {
  width: 100%;
  height: 100%;
}

  



Ответ 2

Ничего не меняя в авторском примере - ввожу туда:  

  


Итог:  



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);
}







В результате можно добиться любой пропорции и положения патча, регулируя лишь
transform="scale(what), translate(x y)"  

Однако это ещё не всё.  

Там, где было , добавим clipPathUnits="objectBoundingBox",
но при этом не забудем подкорректировать  scale(), чтобы результат от "d" всегда был
меньше единицы, как у Александра в полигоне.
- И вот оно, долгожданное счастье!  


Responsive clip-path!!!  


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



html, body {
  margin: 0;
  background: repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222,
#666, #8ce, #666 4%) fixed;
}

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

main {
  height: 100vw;
  clip-path: url(#heart-clip);
  background: linear-gradient(to bottom, blue, red, green, transparent 70%);
}





Ответ 3

Я бы реализовал так, а градиент уже реализовал бы в самом SVG



html,
body {
  width: 100%;
  height: 100%;
  background: #242424;
}

main {
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml, ');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}