SVG Sprite : how to handle sizes?

Question

我正在寻找一个很好的解决方案来处理 SVG Sprite 。

目前我有一个 svg 文件文件夹，带有 grunt-svg-sprite我得到一个 SVG Sprite 图像和一个带有背景图像定义的 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;
}

如何使用 Sprite SVG 执行此操作？

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

Answer 1

这里的这种方法怎么样:

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

我没有测试它，但它允许你在背景中定义 View 框。

(来源:https://css-tricks.com/svg-fragment-identifiers-work/)