title: How to resize SVG clip-path to be same size as image
body: <p>I've got little problem resizing my svg clip-path to fit the image size.</p>
  
  <p>I've got code like this:</p>
  
  <pre><code>&lt;svg id="image-svg" class="clip"&gt;
       &lt;img class="main-img" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" /&gt;
  &lt;/svg&gt;
  &lt;svg class="clip"&gt;
       &lt;clipPath id="clipPolygon"&gt;
            &lt;polygon points="52 0,100 45,50 100,0 50"&gt;
            &lt;/polygon&gt;
       &lt;/clipPath&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And then i'm using css like this:</p>
  
  <pre><code>#image-svg {
    left:0;
    top:0;
  }
  .main-img {
    clip-path: url('#clipPolygon');
    width:90%;
  }
  </code></pre>
  
  <p>Everything works fine, except the clip-path is much smaller then image itself. How to fix this? Here is my working fiddle:</p>
  
  <p><a href="https://jsfiddle.net/7egbccpw/" rel="nofollow noreferrer">https://jsfiddle.net/7egbccpw/</a></p>