Clip path is not working for Firefox, IE, or Edge

<svg height="186px" width="300px">
  <defs>
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image height="1" width="1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg"  preserveAspectRatio="xMidYMid meet"></image>
    </pattern>
  </defs>
  <polygon points="18 7, 282 20, 282 150, 15 171" fill="url(#pattern)"></polygon>
</svg>

function clip() {
  let img = document.querySelector('img');

  let svg = document.querySelector('svg');
  svg.setAttribute('height', img.clientHeight + 'px');
  svg.setAttribute('width', img.clientWidth + 'px');
  svg.querySelector('pattern image').setAttribute('xlink:href', img.src);

  let pointsRaw = img.getAttribute('data-points').split(/,\s/);
  let points = '';
  for (let i = 0; i < pointsRaw.length; i++) {
    let coord = pointsRaw[i].replace(/%/g, '').split(' ');
    let x = img.clientWidth * coord[0] / 100;
    let y = img.clientHeight * coord[1] / 100;
    points += Math.round(x) + ' ' + Math.round(y) + ' ';
  }
  svg.querySelector('polygon').setAttribute('points', points);

  img.style.display = 'none';
  document.querySelector('button').style.display = 'none';
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" data-points="6% 4%, 94% 11%, 94% 80%, 5% 92%">

<svg height="0" width="0">
  <defs>
    <pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image height="1" width="1" xlink:href="" preserveAspectRatio="xMidYMid meet"></image>
    </pattern>
  </defs>
  <polygon fill="url(#pattern)"></polygon>
</svg>

<button onclick="clip()">Clip</button>