如何检测SVG中<use>元素加载外部资源时的404错误？

问题核心原因 #

<use>元素的onerror事件不会直接触发——一方面它属于SVG内部资源加载逻辑，事件冒泡在阴影DOM中有特殊限制；另一方面try/catch无法捕获异步资源加载的错误，因为这类错误不属于同步代码执行的异常范畴。

可行解决方法 #

1. 提前预加载验证资源

在创建<use>元素前，用fetch主动请求目标SVG资源的头部信息，直接判断资源是否存在：

async function checkSvgResource(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch (err) {
    return false;
  }
}

class CustomIconElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  async connectedCallback() {
    const targetUrl = './invalid-icon.svg';
    const resourceValid = await checkSvgResource(targetUrl);

    if (resourceValid) {
      this.shadowRoot.innerHTML = `
        <svg width="24" height="24">
          <use href="${targetUrl}#icon"></use>
        </svg>
      `;
    } else {
      // 404处理逻辑：显示默认图标或提示
      this.shadowRoot.innerHTML = `
        <svg width="24" height="24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
        </svg>
      `;
    }
  }
}

customElements.define('custom-icon', CustomIconElement);

• 优势：主动前置检测，避免无效的<use>元素创建
• 注意：若目标SVG跨域，需确保服务器允许HEAD请求的CORS配置

2. 通过SVG容器事件或尺寸间接判断

<use>自身的error不触发，但可以监听其父SVG元素的error事件，或通过检测<use>的尺寸判断加载状态：

class CustomIconElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const targetUrl = './invalid-icon.svg';
    this.shadowRoot.innerHTML = `
      <svg width="24" height="24">
        <use href="${targetUrl}#icon"></use>
      </svg>
    `;

    const svgContainer = this.shadowRoot.querySelector('svg');
    const useElement = this.shadowRoot.querySelector('use');

    // 监听SVG容器的error事件
    svgContainer.addEventListener('error', () => {
      console.log('SVG资源加载失败（含404）');
      svgContainer.innerHTML = '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>';
    });

    // 备选：通过元素尺寸间接判断（适合无法监听error事件的场景）
    setTimeout(() => {
      const bbox = useElement.getBBox();
      if (bbox.width === 0 && bbox.height === 0) {
        console.log('图标加载失败（疑似404）');
        svgContainer.innerHTML = '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>';
      }
    }, 800); // 延迟时间根据实际加载速度调整
  }
}

customElements.define('custom-icon', CustomIconElement);

• 注意：SVG的error事件可能覆盖其他加载错误（如格式错误），尺寸判断属于间接验证，需合理设置延迟时长

3. 用<object>替代<use>（完整SVG场景）

如果不需要引用SVG内部片段，仅需加载完整SVG文件，可以用<object>标签直接监听error事件：

class CustomIconElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const targetUrl = './invalid-icon.svg';
    const objectEl = document.createElement('object');
    objectEl.type = 'image/svg+xml';
    objectEl.data = targetUrl;
    objectEl.style.width = '24px';
    objectEl.style.height = '24px';

    objectEl.addEventListener('error', () => {
      console.log('SVG资源404');
      this.shadowRoot.innerHTML = '<svg width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
    });

    this.shadowRoot.appendChild(objectEl);
  }
}

customElements.define('custom-icon', CustomIconElement);

• 缺点：无法引用SVG内部的#fragment，仅适用于加载完整SVG图标的场景

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