svg sprite 不显示图标，仅显示 sprite.svg 中的第一个图标

Question

我正在使用 svg sprite，但无法显示图标。只有第一个图标从精灵中显示出来，其余的都没有。有人可以帮忙吗？

我正在参考 html 文件上的 svg 图标并参考精灵表：

<i class="icon icon-desktop-wallet">
  <svg width="145" height="145" viewBox="0 0 53 32">
    <use xlink:href="sprite.svg#icon-image-desktop-wallet"></use>
  </svg>
</i>

这是在 plunker 上：https://plnkr.co/edit/9uJBGIsti0okemimjcNM?p=preview

不太清楚我在这里错过了什么

谢谢

Answer 1

在 sprite.svg 文件中，每个元素的 x 都会发生变化，例如对于 icon-image-bg-cloud，x 值为 37。

<svg id="icon-image-bg-cloud" width="55" height="32" viewBox="0 0 55 32" x="37" y="0">
...
</svg>

这意味着当您使用 viewBox="0 0 29 32" 显示它时，您看不到任何东西，因为精灵位于可视区域之外。

你可以解决这个问题

1. 为此特定精灵设置 viewBox="37 0 29 32"，然后适当调整其他使用值，或者
2. 在 sprite.svg 中为所有精灵设置 x="0"。事实上，您可以完全删除 x 属性，因为这里的默认值为 0。

FWIW 对我来说，选项 2 似乎最简单。