CSS背景大小的SVG Sprite：100％自动;

Question

美好的一天。

我目前正在建立一个网站，我想从图标字体转换为纯svg图标。

问题是当我尝试使用我的SVG精灵（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宽高比时，它可以正常工作。

有什么建议吗？

真诚的，塞巴斯蒂安。

Answer 1

preserveAspectRatio="xMinYMin slice"

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

编辑：

如果您使用Adobe Illustrator导出SVG文件，请记得取消选中“响应”。否则，精灵将无法在Internet Explorer中按预期工作。