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...
<svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
<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);
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…