一个片段，可以看到精灵中的所有SVG

SVG精灵图通常是这样的：

<svg display="none">
  <symbol>...</symbol>
  <symbol>...</symbol>
  <symbol>...</symbol>
</svg>

过去，我非常喜欢这种用于图标系统的方法（根据需要使用<use></use>元素），但如今我更倾向于根据需要直接包含SVG。尽管如此，精灵图仍然很好，并且相当流行。<use></use>

如果您有一个精灵图，并且想要查看其中包含的内容，该怎么办？

这是一小段JavaScript代码，它将循环遍历找到的所有符号，并注入一个使用每个符号的SVG……

const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
    <svg height="50" width="50">
      <use xlink:href="#${symbol.id}"></use>
    </svg>
  `);
});

就是这样。

以上是一个片段，可以看到精灵中的所有SVG的详细内容。更多信息请关注PHP中文网其他相关文章！