SVG图像未在Firefox中加载

Question

这里是codepen，此问题的底部是实际代码。尽管代码在Chrome中运行正常，但出于某些原因，image元素中的svg元素未在Firefox中加载。我已经在Firefox版本64和64.0.2上对其进行了测试。都不加载图像。

基于我遇到的SO answer和documentation本身，我尝试了许多不同的方法，但均无济于事。我尝试过的一些事情是...

1. <svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
2. <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>