Aquí hay una codepen y al final de esta pregunta está el código real. Aunque el código funciona bien en Chrome, por alguna razónimage elementos en unasvg elemento no se carga en Firefox. Lo he probado en las versiones de Firefox64 y64.0.2. Ninguno carga las imágenes.

Basado en unaPues contest Me encontré, y eldocumentació en sí, he probado varias cosas diferentes, ninguna de las cuales funcionó. Algunas de las cosas que he probado son ...

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

Es esto un error con la implementación de SVG de Firefox? Descubrí errores con la implementación SVG de Firefox antes, así que no me sorprendería.

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);
}