SVG 精灵不显示图标，只显示精灵.svg中的第一个图标

Question

我正在使用svg精灵，但在显示图标时遇到问题。 只有第一个图标从精灵中显示，其余的没有。 有人可以帮忙吗？

我引用了 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

在精灵.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. 在精灵中设置 x="0".svg为您的所有精灵。实际上，您可以完全删除x属性，因为此处的默认值为0。

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