Question

我有一个较少的图标mixin，它读取一小组svg图标，并将结果输出为带有背景属性的css类。

出于我当前项目的目的，它是使用SVG的最有效方式。较少mixin也会在后备背景图片网址中添加，引用png。

项目选择的构建任务运行器是gulp，当任务运行时，生成的示例css输出遵循以下模式：

.rss {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: #ee802f;
}
.no-svg .rss {
  background-image: url('/wordpress/wp-content/themes/theme/images/rss.png');
}
.svg .rss {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M13.296%2040.908c-2.34%200-4.243-1.89-4.243-4.23%200-2.33%201.902-4.24%204.243-4.24%202.354%200%204.25%201.91%204.25%204.24%200%202.342-1.897%204.23-4.25%204.23zm10.67.033c0-3.992-1.554-7.753-4.37-10.564C16.783%2027.556%2013.037%2026%209.057%2026V19.89c11.603%200%2021.05%209.443%2021.05%2021.055h-6.14v-.002zm11.104-.77c0-14.208-11.555-25.775-25.75-25.775V8.28c17.577%200%2031.883%2014.313%2031.883%2031.89H35.07z%22%2F%3E%3C%2Fsvg%3E");
}

此时png文件不存在。

我想要实现的是gulp中的一个解决方案，它将查找每个data-url'dv，然后生成png后备图像文件。这样的事情甚至可能吗？

谢谢！

Answer 1

如果您正在使用精灵gulp-svgfallback将完成这一操作，它会为IE8及更低版本生成一个SVG精灵和第二个PNG精灵。

使用gulp可以从svg data-uri生成后备背景图像吗？

1 个答案: