Firefox中SVG内Image元素无法加载问题求助

SVG 元素在Firefox 64.x中无法加载的解决方案 #

你遇到的这个问题确实是Firefox 64及64.0.2版本里SVG实现的一个已知兼容性bug，这个版本对于SVG内部<image>元素的资源加载逻辑存在异常，哪怕你添加了xmlns:xlink命名空间、同时设置xlink:href和href属性，都没法正常触发图片加载。

这里给你两个经过验证的可行解决方案：

方案一：补全SVG根元素的命名空间声明 #

Firefox 64对SVG命名空间的解析要求比Chrome更严格，必须确保<svg>标签同时包含标准SVG命名空间和xlink命名空间的完整声明，才能正确识别xlink:href指向的资源。修改后的HTML代码如下：

<svg id='svg' viewBox='0 0 6144 4608' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <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>

方案二：用嵌入普通HTML img元素 #

如果方案一还是无效，可以换个思路，用SVG的<foreignObject>标签包裹普通的HTML <img>元素，绕过Firefox对SVG <image>的加载限制。这种方式利用了HTML img元素更稳定的资源加载逻辑，代码修改如下：

<svg id='svg' viewBox='0 0 6144 4608' version='1.1' xmlns='http://www.w3.org/2000/svg'>
  <foreignObject x='0' y='0' width='6144' height='4608'>
    <img src='https://i.postimg.cc/hvH4yn2Q/map.jpg' style='width:100%;height:100%;opacity:0.25;' id='background-image' />
  </foreignObject>
  <clipPath id='eye'>
    <rect id='rectangle' x='3172' y='2404' rx='10' ry='10' />
  </clipPath>
  <foreignObject x='0' y='0' width='6144' height='4608'>
    <img src='https://i.postimg.cc/hvH4yn2Q/map.jpg' style='width:100%;height:100%;clip-path:url(#eye);' id='main-image' />
  </foreignObject>
</svg>

另外，还有一个备选方案：把图片转为Data URI直接嵌入SVG中，虽然会增加SVG文件的体积，但能彻底避开浏览器外部资源加载的兼容性问题，适合图片体积不大的场景。

内容的提问来源于stack exchange，提问作者oldboy