css - 具有 CSS 背景大小 : 100% auto; 的 SVG Sprite

Question

美好的一天。

我目前正在 build 一个网站，我想从图标字体过渡到纯 svg 图标。

问题是当我尝试使用我的 SVG Sprite (1:3 宽高比)作为背景时

.icon {
  width: 1em;
  height: 1em;
  background-image: url('path/to.svg');
  background-position: 0 0;
  background-size: 100% auto;
}

它被缩小了，我的悬停效果(下图)位置很尴尬。

.icon:hover,
.icon:focus {
  background-position: 0 -1em;
}

当我有一个宽高比为 1:2 的 sprite 时，它​​可以正常工作。

有什么建议吗？

真诚的，塞巴斯蒂安。

Answer 1

preserveAspectRatio="xMinYMin slice"

这段代码解决了它。谢谢 AmeliaBR。

编辑:

如果您使用 Adob​​e Illustrator 导出 SVG 文件，请记住取消选中“响应式”。否则 Sprite 将无法在 Internet Explorer 中正常工作。