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

Question

美好的一天。

我目前正在构建一个网站，我想从图标字体过渡到纯 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;
}

当我的 Sprite 大小为 1:2 宽高比时，它可以正常工作。

有什么建议吗？

此致，塞巴斯蒂安。

Answer 1

preserveAspectRatio="xMinYMin slice"

这段代码解决了这个问题。谢谢阿米莉亚BR。

编辑:

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