Example here

<svg width="978px" height="668px" viewBox="0 0 978 668" version="1.1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw">
  <defs>
    <pattern id="top" width="1" height="1" viewBox="0 0 717 478" preserveAspectRatio="xMidYMid slice">
      <image xlink:href="http://ift.tt/1JvUlcp" width="717px" height="478px"></image>
    </pattern>
  </defs>

  <g>        
    <path d="M1,95.0771484 L1,0 L979,0 L424.030762,379.068604 L1,95.0771484 Z" fill="url(#top)"></path>
  </g>
</svg>

Open in Firefox to see image stretched (undesired effect)

Open in Chrome to see image sliced (desired effect)

I read Crop to fit an svg pattern, which was close to solving the problem.

It appeared to work only on 'circle's #2 and #3.

When I applied my 'path', image got stretched again.

They mention a Firefox bug, but it is marked as 'fixed'.

How can I get my image sliced across browsers?