Resize the image inside the polygon point (svg) and make it not cropped

Question

I want to achieve the following:

Resize the image inside the svg element so that it fits perfectly inside the polygon, and in addition, it is fully viewable and not cropped (see jsfiddle).

I reviewed many stackoverflow related issues, but can't figure it out:

code:

<svg width="50%" height="50%" viewBox="0 0 25 10"  preserveAspectRatio="none">
  <defs>
      <pattern id="im1" width="100%" height="100%" preserveAspectRatio="none">
          <image  preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://dummyimage.com/600x400/abc" width="100%" height="100%"></image>
      </pattern>
  </defs>
   <polygon points="0,10 29, 10 10, 0" x="0" y="0" style="fill:url(#im1);"></polygon>

</svg>

See https://jsfiddle.net/f8ktzyLw/

Can someone point me in the right direction? is this only possible with svg or do i need javascript / canvas?