为什么我的 SVG sprite id 引用没有加载相应的 svg？答案

【问题标题】：Why is my SVG sprite id reference not loading the corresponding svg?为什么我的 SVG sprite id 引用没有加载相应的 svg？
【发布时间】：2021-12-06 14:58:34
【问题描述】：

我在 vanilla JS 中使用 SVG Sprite 系统将两个 SVG 加载到我的页面上。我使用https://svgsprit.es/ 服务在一个icons.svg 文件中包含了两个SVG：

<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 0 0" id="delete">
    <symbol viewBox="0 0 0 0" id="delete">
      <symbol fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
        <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"></path>
      </symbol>
    </symbol>
  </symbol>
  <symbol viewBox="0 0 0 0" id="edit">
    <symbol fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
      <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"></path>
    </symbol>
  </symbol>
</svg>

当我通过我使用的动态 JS 添加 HTML 时：

const container = document.createElement('div');

//add edit icon
const editIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
editIcon.classList.add('icon');
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#edit');
editIcon.appendChild(use);

//add delete icon
const deleteIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
deleteIcon.classList.add('icon');
const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
use2.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#delete');
deleteIcon.appendChild(use2);

container.appendChild(editIcon);
container.appendChild(deleteIcon);

但只有编辑图标出现成功？我注意到删除 SVG 有两个符号标签，每个标签都有一个 id - 我在我的 JS 中引用它是否错误？

**是的，我知道 xlink:href 已被弃用！这只是一个学习的小项目，所以浏览器兼容性不是很重要

【问题讨论】：

只是问：为什么你有 3（三）个元素相互嵌套？
因为我对 SVG 不是很熟悉，所以我使用这个服务来组合和引用它们：svgsprit.es 所以这是它生成的组合 SVG 文件

标签： javascript html svg sprite

【解决方案1】：

您的 sprite 文件有问题。您不应该有多个嵌套的 <symbol> 元素。

  <symbol viewBox="0 0 0 0" id="delete">
    <symbol viewBox="0 0 0 0" id="delete">

每个图标应该只有一个。

您的“删除”图标未显示的原因是，当浏览器尝试查找"delete" 符号时，它有两个具有id="delete"。一开始这是非法的，因为id 属性必须是唯一的。

它将选择其中之一。在这种情况下，选择哪一个并不重要。这是因为“删除”符号包含的所有内容都是 <symbol> 元素。这实际上没什么，因为 <symbol> 元素本身不会被渲染。它们仅在被 <use> 引用时才会呈现。

你很幸运有“编辑”符号，因为你有三个。但幸运的是，您的浏览器可能会选择它找到的第一个 id 匹配项。对于id="edit"，第一个是嵌套的<symbol id="delete"> 内的三层。

换句话说，您的 sprite 文件在浏览器中看起来像这样

<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 0 0" id="delete">
  </symbol>
  <symbol fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
    <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"></path>
  </symbol>
</svg>

修复嵌套符号问题。看起来您正在向该实用程序传递已经只包含符号的 SVG 文件。所以它只是将符号包装在其他符号中。

我希望您应该将可渲染的 SVG 传递给该实用程序。如果您的 SVG 文件在使用浏览器打开时没有呈现任何内容，则它们可能已经是“精灵表”。仅使用在浏览器中打开时会显示某些内容的 SVG。

对于您的直接问题，请尝试使用此手动修复的文件。

<svg width="0" height="0" class="hidden">
  <symbol fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="delete">
    <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"></path>
  </symbol>
  <symbol fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
    <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"></path>
  </symbol>
</svg>

【讨论】：

非常感谢！！！我知道多个 id 有问题！！ :)