SVG 和 Grunt 将输出部分变为黑色答案

【问题标题】：SVG and Grunt turning output partially blackSVG 和 Grunt 将输出部分变为黑色
【发布时间】：2014-09-26 01:08:06
【问题描述】：

我刚刚安装了 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 文件，它看起来很好。我已经重新导出它，确保所有设置都是正确的，它仍然会发生。

有什么建议吗？

谢谢，尼尔

【问题讨论】：

标签： svg gruntjs grunt-svgstore

【解决方案1】：

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

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

【讨论】：

【解决方案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 %>'
    }
  }
},

【讨论】：