a imagen de @SVG no se carga en Firefox
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>
CSSbody {
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);
}