SVG <image>元素资源加载失败的跨浏览器回退方案咨询

SVG 元素加载失败的跨浏览器回退方案 #

下面两种方案均兼容Chrome、Firefox、Edge三大主流浏览器，可以根据业务场景选择：

方案1：JavaScript全局监听实现（支持自定义错误处理逻辑） #

由于SVG <image> 元素的内联onerror事件触发逻辑与HTML <img> 存在差异，内联写法普遍不兼容，改为全局事件捕获即可稳定触发错误回调：

document.addEventListener('error', function(e) {
  const targetEl = e.target;
  // 仅处理SVG的image元素加载错误
  if (targetEl.tagName === 'image' && targetEl.namespaceURI === 'http://www.w3.org/2000/svg') {
    // 标记已应用回退，避免回退图加载失败进入死循环
    if (targetEl.dataset.hasFallback) return;
    targetEl.dataset.hasFallback = '1';
    // 同时设置两种href属性，兼容新旧SVG规范
    targetEl.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '你的默认错误图地址');
    targetEl.setAttribute('href', '你的默认错误图地址');
  }
// 必须开启事件捕获才能拿到SVG元素的加载错误事件
}, true);

方案2：纯SVG+CSS实现（无需JavaScript，性能更高） #

利用Chrome下加载失败的<image>可以通过:invalid伪类匹配的特性，结合层级覆盖实现回退：

/* 可以写在全局CSS里，也可以内联到SVG的<style>标签中 */
.svg-primary-image:invalid {
  opacity: 0;
}

SVG代码示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 下层为回退内容，可放图片或者自定义的SVG错误提示图形 -->
  <image href="fallback.png" x="0" y="0" width="200" height="200" />
  <!-- 上层为主图，加载失败时变为透明，露出下层回退内容 -->
  <image class="svg-primary-image" href="target-image.png" x="0" y="0" width="200" height="200" />
</svg>

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