Превратить CSS clip-path со смешанными (фиксированными и процентными) значениями в SVG clip-path

#css #svg #clip_path

Есть картинка карточки с градиентом и обрезанным уголком, полученным с помощью clip-path:



.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, blue, green);
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}





Обрезанный угол должен иметь фиксированный размер вне зависимости от размера карточки,
поэтому я использую фиксированные размеры (в пискелях) для обрезания угла.

Но clip-path имеет не самую лучшую поддержку браузеров, поэтому я попытался превратить
этот HTML/CSS в SVG.



.container {
  width: 200px;
  height: 200px;
}

  





Но проблема в том, что я не могу сделать так, чтобы обрезанный угол иметь фиксированный
размер, независящий от размера всей картинки.
    

Ответы

Ответ 1

Этот вариант уже озвучивал в комментариях @UbuntuUser , но прошли почти сутки поэтому:



var widthInput = document.querySelector('[name=width]'),
    image = document.querySelector('image');

widthInput.addEventListener('input', function() {
  image.width.baseVal.value = this.value;
});
body {
  background-color: #ddd;
}

svg {
  width: 470px;
  height: 300px;
  outline: 1px solid;
}
input{
  vertical-align:top;
}




Ответ 2

Для моего случая озвученного в вопросе решение будет таким



.container {
  width: 200px;
  height: 200px;
}

svg {
  width: 100%;
  height: 100%;
}

  



Ответ 3

Для сохранения  фиксированного размера уголка, вы не можете использовать viewBox  SVG 

Просто обрежьте угол, который вам нужен, и сделайте так, чтобы другие углы были вытянуты
так, чтобы clippath покрывал любой размер, который вам может понадобиться. В приведенном
ниже примере я увеличил значение Clippath до (10000,10000). 

Здесь мы применяем градиент к 100% x 100% . Это нужно, чтобы градиент всегда
масштабировался по размеру экрана. Затем мы применяем clippath к прямоугольнику, чтобы
получить вырез.    



html, body {
  height: 100%;
}

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

  





Источник ответа: @Paul LeBeau