title: Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path
body: <p>I have a card image with gradient with clipped corner using <code>clip-path</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Clipped corner must have fixed size regardless of card size so I'm using pixels for clipping corner.</p>
  
  <p>But <code>clip-path</code> has not the best browser support at the moment, so I've tried converting this HTML and CSS to SVG.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 200px;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;svg viewBox="0 0 100 100" clip-path="url(#myClip)"&gt;
      &lt;defs&gt;
        &lt;linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
          &lt;stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" /&gt;
          &lt;stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" /&gt;
        &lt;/linearGradient&gt;
      &lt;/defs&gt;
    
      &lt;polygon points="20,0 100,0 100,100 0,100 0,20" fill="url(#grad1)" /&gt;
   &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the issue is that I can't make this clipped corner to have fixed size regardless of card size.</p>