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

Question

Есть картинка карточки с градиентом и обрезанным уголком, полученным с помощью 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);
}

<div class="card"></div>

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

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

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

<div class="container">
  <svg viewBox="0 0 100 100" clip-path="url(#myClip)">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      </linearGradient>
    </defs>
&lt;polygon points="20,0 100,0 100,100 0,100 0,20" fill="url(#grad1)" /&gt;

</svg>
</div>

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

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

<svg>
  <defs>
    <mask id="triangle-clip">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <path d="M0,20 v-20 h20 z" fill="#000" />
    </mask>
  </defs>  
  <image xlink:href="https://cs4.pikabu.ru/post_img/big/2016/06/25/5/1466835263296535231.jpg" x="0" y="0" width="300" mask="url(#triangle-clip)" />
</svg>
<input type="number" name="width" min="40" max="470" placeholder="ширина картинки" />

Answer 2

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

.container {
  width: 200px;
  height: 200px;
}
svg {
  width: 100%;
  height: 100%;
}

<div class="container">
  <svg>
    <defs>
      <mask id="triangle-clip">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        <path d="M0,20 v-20 h20 z" fill="#000" />
      </mask>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#grad1)" mask="url(#triangle-clip)" />
  </svg>
</div>

Answer 3

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

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

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

html, body {
  height: 100%;
}
.container {
  width: 50%;
  height: 50%;
}

<div class="container">
  <svg width="100%" height="100%">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      </linearGradient>
      <clipPath id="clip1">
        <polygon points="20,0 10000,0 10000,10000 0,10000 0,20"/>
      </clipPath>
    </defs>

    <rect width="100%" height="100%" fill="url(#grad1)" clip-path="url(#clip1)"/>
 </svg>
</div>

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