title: SVG custom polygon image stretch not working
body: <p>I'm trying to both stretch and rotate an image into an SVG polygon (Basically an arc).</p>
  <p>What I need is to stretch the image to fit, not tile or clip it.</p>
  <p>What I'd like is :
  The stretched/distorted image in the arc without the image clipped.</p>
  <p>What I have is:
  <a href="https://i.stack.imgur.com/Ao45m.png" rel="nofollow noreferrer">Clipped arc image</a></p>
  <p>Here's the fiddle I've been working on -
  <a href="https://jsfiddle.net/eLrgfnxb/57/" rel="nofollow noreferrer">https://jsfiddle.net/eLrgfnxb/57/</a></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-html lang-html prettyprint-override"><code>&lt;svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="1000" width="1000"&gt;
      &lt;defs&gt;
          &lt;pattern id="blip1" patternUnits="userSpaceOnUse" width="100%" height="100%"&gt;
               &lt;image  preserveAspectRatio="none" xlink:href="http://i.imgur.com/uTDpE6J.jpg" &gt;&lt;/image&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
      &lt;polygon points="453,372 67,184 70,177 73,171 77,164 81,158 85,151 88,145 92,138 97,132 101,126 105,120 110,114 114,108 115,107" x="1" y="1" style="stroke-linejoin:round; fill:url(#blip1); stroke-width:2; stroke:hsl(212,45%,26%); "&gt;
      &lt;/polygon&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've seen a few ones:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/20660085/how-to-stretch-an-image-in-a-svg-shape-to-fill-its-bounds">How to stretch an image in a SVG shape to fill its bounds?</a> (This is where I started, but doesn't handle the arc very well)</li>
  <li><a href="https://stackoverflow.com/questions/36659710/image-to-fill-a-polygonal-svg-shape/36659822">Image to fill a polygonal SVG shape</a> (Also doesn't handle the complicated shape)</li>
  <li><a href="https://stackoverflow.com/questions/34200128/resize-image-inside-polygon-point-pathsvg-and-make-it-not-clipped">Resize image inside polygon point path(svg) and make it not clipped</a></li>
  </ul>
  <p>I was thinking about switching to a canvas to see if that worked. I saw a couple interesting things here:
  <a href="https://stackoverflow.com/questions/39871739/stretch-image-to-fit-polygon-html5-canvas/39872040#39872040">Stretch image to fit polygon html5 canvas</a></p>
  <p>Thanks for the help!</p>