svg - SVG 和 Grunt 将输出部分变为黑色

Question

我刚刚安装了 Grunt 和 grunt-svgstore 并使用它将我的 SVG 文件夹编译到一个 application.svg 中，其中每个图标都有一个唯一的 id，我可以使用它来引用：

它适用于某些图标，但对于其他图标，它们的部分形状会变黑。对于我上面链接的 ruby​​ 徽标，它显示如下： http ://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png

实际的 SVG 文件可以在这里找到：http ://cl.ly/2k012T020d2S/ruby-logo.svg

如果我在 illustrator 中打开 ruby​​-logo.svg 文件，它看起来很好。我已经重新导出它，确保所有设置都正确并且它仍然会发生。

有什么建议么？

谢谢，尼尔

Answer 1

通过在我的文档顶部的 application.svg 导入中添加以下样式来解决：

width: 0;
height: 0;
visibility: hidden;

Answer 2

改用“样式”选项..

例如：

svgstore: {
  options: {
    prefix : 'icon-', // This will prefix each ID
    svg: {
      viewBox : '0 0 100 100',
      xmlns: 'http://www.w3.org/2000/svg',
      style: 'display:none;' // This line might help you!
    },
    cleanup: ['fill','stroke']
  },
  default: {
    files: {
      '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
    }
  }
},