CODEWITHSUNDEEP
google-chromefirefoxsvgxlink
oldboy
oldboy

Reputation: 5964

SVG Image Not Loading in Firefox

Here is a codepen and at the bottom of this question is the actual code. Although the code works fine in Chrome, for some reason image elements in an svg element are not loading in Firefox. I've tested it on Firefox versions 64 and 64.0.2. Neither loads the images.

Based on an SO answer I came across, and the documentation itself, I've tried a number of different things, none of which worked. Some of the things I've tried are...

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

Is this a bug with Firefox's implementation of SVG? I've discovered bugs with Firefox's SVG implementation before, so I wouldn't be surprised.

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

Upvotes: 1

Views: 4957

Answers (2)

andora
andora

Reputation: 1366

Check the image mime type, it must be: image/svg+xml

Upvotes: 0

Kosh
Kosh

Reputation: 18434

The width and height attributes must be assigned to the image element in the actual HTML for SVG version 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>

Upvotes: 3

Related Questions