odepen и в нижней части этого вопроса фактический код. Хотя код отлично работает в Chrome, по некоторым причинам элементы вimage элемент не загружается в Firefox. Я проверил это на версиях Firefoxsvg а также64, Ни один не загружает изображения.64.0.2На основе

Так ответь Я наткнулся, идокументация Сам я пробовал много разных вещей, ни одна из которых не сработала. Некоторые вещи, которые я пробовал ...Это ошибка в реализации Firefox SVG?

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

 Я обнаружил ошибки в реализации Firefox SVG раньше, поэтому я не удивлюсь.HTML

CSS

<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>

Возможный дубликат

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