Aqui está um codepen e na parte inferior desta pergunta está o código real. Embora o código funcione bem no Chrome, por algum motivoimage elementos em umsvg elemento @ não está carregando no Firefox. Eu testei nas versões do Firefox64 e64.0.2. Nem carrega as imagens.

Baseado em umEntão respond Me deparei com odocumentaçã, tentei várias coisas diferentes, nenhuma das quais funcionou. Algumas das coisas que eu tentei são ...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ... ><image xlink:href='...' href='...'

Isso é um bug com a implementação do SVG no Firefo Descobri bugs com a implementação SVG do Firefox antes, para não me surpreende

HTML

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='background-image' />
  <clipPath id='eye'>
    <rect id='rectangle' x='3172' y='2404' rx='10' ry='10' />
  </clipPath>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='main-image'/>
</svg>

CSS

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

#svg {
  width: 6144px;
  height: 4608px;
  position: absolute;
  left: -3072px; /* set with JS */
  top: -2304px; /* set with JS */
}

#background-image {
  width: 6144px;
  height: 4608px;
  opacity: 0.25;
}

rect {
  width: 35vw;
  height: 75vh;
}

#main-image {
  width: 6144px;
  height: 4608px;
  clip-path: url(#eye);
}