SVG sprite：如何处理尺寸？答案

【问题标题】：SVG sprite: how to handle sizes?SVG sprite：如何处理尺寸？
【发布时间】：2015-12-18 09:22:02
【问题描述】：

我正在寻找使用 SVG Sprites 的良好解决方案。

目前我有一个 svg 文件的文件夹，grunt-svg-sprite 我得到一个 SVG 精灵图像和一个带有背景图像定义的 CSS 文件。

现在我想用 sprite SVG 替换我的单文件 SVG，但我无法调整它们的大小。其中一些在原始文件中的大小不正确。我尝试了很多宽度、高度、背景大小的组合，但没有成功。

这是带有复选框图像的列表项的单个文件 SVG 的 CSS：

li {
   background-image: url(../../img/check_red.svg);
   background-position: 0 12px;
   background-repeat: no-repeat;
   background-size: 16px auto;
   padding-left: 26px;
}

如何使用精灵 SVG 做到这一点？

我需要某种自动化的解决方案：运行任务后添加新的 SVG 文件，SVG 有不同的大小，等等。我已经尝试过但不起作用的是grunt-svgstore，SVG 图像被弄乱了（改变了形状、线条、颜色）

【问题讨论】：

标签： svg sprite

【解决方案1】：

这里的方法怎么样：

.icon-clock {
  background: url("sprite.svg#svgView(viewBox(0, 0, 32, 32))") no-repeat;
}

我没有测试它，但它允许您在背景中定义视图框。

（来源：https://css-tricks.com/svg-fragment-identifiers-work/）

【讨论】：

但是如何将它与 CSS 一起使用，就像我的 CSS 示例中的列表项一样？然后我必须为每个列表项添加一个 SVG 标签，对吗？目前不是我的首选解决方案...
我知道你现在想做什么。您想将它们用作“列表图标”。这种方法行得通吗？（查看更新的答案）