为什么我的SVG Sprite id引用无法加载对应的SVG图标？

API 探路者

2026-9-29

问题根因

你的问题和JS引用逻辑无关，核心是你生成的icons.svg文件本身存在结构错误：

symbol标签不允许嵌套，必须为同级结构。你当前id为delete的symbol嵌套了2层子symbol，最内层节点的id实际是edit，浏览器无法从#delete匹配到有效的矢量路径
同一份SVG文件内id必须唯一，你存在多个重复的id="delete"、id="edit"节点，浏览器匹配ID时只会返回第一个命中的节点，而第一个id为delete的symbol的viewBox属性为0 0 0 0，就算匹配到也无法正常渲染
当前所有delete关联的symbol内没有对应删除图标的路径数据，全部是编辑图标的路径，属于SVG Sprite合并服务生成故障

修复方案

修正icons.svg的结构，将两个symbol改为同级，替换正确的删除图标路径，示例如下：

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg">
  <!-- delete图标，可替换path为你自己的删除图标路径 -->
  <symbol fill="#000000" id="delete" viewBox="0 0 24 24">
    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
  </symbol>
  <!-- edit图标 -->
  <symbol fill="#000000" id="edit" viewBox="0 0 24 24">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"/>
  </symbol>
</svg>