SVG 图像未在 Firefox 中加载

Question

这是一个 codepen 并且在这个问题的底部是实际代码。尽管代码在 Chrome 中运行良好，但出于某种原因，svg 元素中的 image 元素未在 Firefox 中加载。我已经在 Firefox 版本 64 和 64.0.2 上对其进行了测试。两者都不加载图像。

基于 SO answer I came across, and the documentation 本身，我尝试了很多不同的方法，其中 none 有效。我尝试过的一些事情是...

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

这是 Firefox 的 SVG 实现的错误吗？我以前发现过 Firefox 的 SVG 实现的错误，所以我不会感到惊讶。

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

Answer 1

width 和 height 属性 must 分配给 SVG 1.1 版实际 HTML 中的 image 元素：

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

Answer 2

检查图片mime类型，必须是：image/svg+xml

SVG 图像未在 Firefox 中加载

SVG Image Not Loading in Firefox

google-chrome

firefox

svg

xlink

HTML

CSS