Изображение SVG не загружается в Firefox - PullRequest
Новая
       70

Изображение SVG не загружается в Firefox

0 голосов
/ 19 января 2019

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

Основываясь на ответе SO , с которым я столкнулся, и самой документации 1012 *, я пробовал несколько разных вещей, ни одна из которых не работала. Вот некоторые вещи, которые я пробовал ...

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

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

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

1 Ответ

0 голосов
/ 19 января 2019

Атрибуты width и height должны быть назначены элементу image в фактическом HTML для SVG версии 1.1: 

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' width="100%"; height="100%" 
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    />
</svg>
...