SVG с рисунком работает только в Chrome

Question

Я пытаюсь получить изображение с углом вверху, и изображение должно обновляться через CMS.Самый кросс-браузерный совместимый способ, который я нашел, - это использовать SVG, создавая путь и давая ему шаблон.Код, который у меня есть сейчас:

<svg class="workIntroImage" width="696px" height="921px" viewBox="0 0 696 921">
  <defs>
    <pattern id="workIntroImg" width="1920" x="0" y="0" height="1080" patternUnits="userSpaceOnUse">
      <image xlink:href="https://www.usmagazine.com/wp-content/uploads/2017/12/147234372_the-office-zoom.jpg" x="0" y="0" width="1920" height"1080"></image>
    </pattern>
  </defs>
  <g x="0" y="0" transform="translate(-37.000000, 0.000000)">
    <path x="0" y="0" d="M0,0 L725.886225,151.670321 C729.593802,152.445001 732.25,155.713561 732.25,159.501206 L732.25,928 L0,928 L0,0 Z" fill="url(#workIntroImg)"></path>
  </g>
</svg>

Но это работает только в Chrome - просто отображается как пустое в Firefox, Safari и Edge.Будем благодарны за любые идеи или альтернативные решения, которые будут работать во всех современных браузерах!

Answer 1

Это, вероятно, просто опечатка - в <image ... height"1080"> отсутствует =.Chrome хорошо разбирает неверную разметку, других браузеров не всегда так много.

<svg class="workIntroImage" width="696px" height="921px" viewBox="0 0 696 921">
  <defs>
    <pattern id="workIntroImg" width="1920" x="0" y="0" height="1080" patternUnits="userSpaceOnUse">
      <image xlink:href="https://www.usmagazine.com/wp-content/uploads/2017/12/147234372_the-office-zoom.jpg" x="0" y="0" width="1920" height="1080"></image>
    </pattern>
  </defs>
  <g x="0" y="0" transform="translate(-37.000000, 0.000000)">
    <path x="0" y="0" d="M0,0 L725.886225,151.670321 C729.593802,152.445001 732.25,155.713561 732.25,159.501206 L732.25,928 L0,928 L0,0 Z" fill="url(#workIntroImg)"></path>
  </g>
</svg>