一個片段，可以看到精靈中的所有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中文網其他相關文章！