Question

我正在寻找与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;
}

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

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

Answer 1

这种方法怎么样：

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

我没有测试它，但它允许你在后台内定义视图。

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

SVG精灵：如何处理大小？

1 个答案: