【问题标题】：SVG Image Not Loading in FirefoxSVG 图像未在 Firefox 中加载
【发布时间】：2019-06-13 06:13:21
【问题描述】：

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

基于我遇到的SO answer 和documentation 本身，我尝试了许多不同的方法，但都没有奏效。我尝试过的一些事情是......

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

【问题讨论】：

SVG <image> tag not working in Safari and Firefox的可能重复
@Kaiido 这不是重复的。该问题与缺少 width 和 height 属性无关，它们在 css 中设置...
是的，它是重复的，必须设置 width 和 height 属性才能让 Firefox 加载此图像，就像所需的 SVG1.1 规范一样。通过 CSS 设置它是不够的。在 svg2 中这会改变，但 FF 仍然不支持 SVG2 的这一部分（而 Chrome 支持）。
哦，实际上我错过了，但即使你的 <rect> 在 svg1.1 中也需要它的属性，但你的 vw 和 vh 单位将不起作用那里：codepen.io/_-0-_/pen/gZVOQL
@Kaiido 因此，如果我在 HTML 中为 width 和 height 属性添加随机值，我仍然可以在通过 JS 加载页面时修改它们，并且 HTML/SVG1.1 将尊重该权利?

标签： google-chrome firefox svg xlink

【解决方案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>

【讨论】：

是必需的，它是 width 而不是 whidth
@Anthony "attributes"，您在 XML 标记内的标记中放入的小东西。还有“是”，因为SVG2 specs 现在支持auto 值。所以 were 现在是正确的，因为一些 UA 已经实现了它。当我们看到他们已经在其他地方弃用 xlink:href 时，社区驱动的 MDN 没有流行起来只是不一致，但它最终会在某个时候变平。
@Kaiido 啊不知道规格变了

【解决方案2】：

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

【讨论】：