问题标签 [grunt-svgstore]

我正在使用 grunt-svgstore 来合并 SVG 文件。有一个名为“cleanup”（https://github.com/FWeinb/grunt-svgstore#optionscleanup）的选项应该：

清理所有可能危及以后基于样式表的着色（填充）的内联样式定义。

但是，我的似乎不起作用。它的其余部分运行良好，我得到了前缀和 viewBox 并创建了文件。只是清理似乎不起作用。我在这里的语法错误吗（来自我的 Gruntfile.js）？

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

有什么建议么？

谢谢，尼尔

This is quite puzzling. I am swapping over from icon fonts in favour of svg sprites using grunt-svgstore.

The logo of the page has a gradient in it.

All was working well until I moved on to dev the other pages of the site when the gradient in the logo disappeared.

The logo was created in Illustrator and once run through grunt-svgstore outputs the following:

I am then using this svg in the following manner:

Any input is appreciated.

像用于图像的 grunt-sprite-generator 之类的东西，我需要一个用于 svg 文件的插件。我尝试使用grunt-svg-sprite grunt 插件，但它只创建 sprite 而不会修改 css 目录结构。

在实现 SVG sprite 时，<svg>会创建一个元素并通过该元素引用 svg 元素<use>。然后使用隐藏包含<svg>元素style="display: none;"

clip-Path 属性不会呈现，但路径会呈现。这使我的路径看起来与我想要的不同。

如何使用 svg<use xlink:href="#"/>引用具有剪辑路径的元素？

我使用 grunt-svg-store 创建了我的 svg sprite，但已将这个示例简化为问答格式https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Codepen.io 上的实时示例

我的咕噜声文件看起来像：

};

如果您看到 SVG 图标的名称，我已使用 A、B、C 等来命名它们。Grunt-SVG-Sprite 通过按字母顺序获取图标名称来制作精灵。因此，我添加 A、B、C.. 的原因是，如果我添加更多图标，我会将它们包含为 K、L.. 以便它们最后附加到现有精灵中，而不干扰现有图标及其背景特性。如何确保添加到我的文件夹中的新图标只会添加到最后？

编辑：解决了第二个问题（见我的评论）：

第二个问题是生成的精灵的名称。根据当前的 grunt 文件，它会生成sprite.css.svg。我想将其命名为 MyIcons.svg，我该怎么做？

我正在使用我在 CSS Tricks ( https://css-tricks.com/svg-sprites-use-better-icon-fonts/ ) 上找到的一种技术将我的 SVG 精灵包含在我的应用程序中。

这是一个基本的 AngularJS 应用程序，我包含了 SVG，然后我使用标签来实现图标。

所有这些在除 Firefox 之外的所有浏览器中都能正常工作。经过调查，我注意到导致问题的是我的基本 href（由于应用程序插入旧系统的方式，我无法删除）：

谁能告诉我如何解决这个问题？

我正在使用 grunt-svgstore 任务来创建 svg 文件的合并版本。

问题陈述：
完成 grunt-svgstore 任务后，我已经包含了 svg 文件。

我的解决方案
svg-sprite.svg

索引.html

index.html 的页脚部分

用法

还有其他方法可以让我以更有效的方式编写上述代码吗？

我有一个嵌入在网页中的 SVG 精灵，其中包含多个图像作为符号，其中一些图像具有<defs>在 SVG 部分中定义的渐变填充。但是，当我尝试通过使用<use>标签来使用页面上的任何图像时，图像会显示，但没有任何渐变。例如

我相信这是包含渐变的正确方法，在符号外部定义了 defs 部分。但是它在 chrome、firefox 或 IE11 / Edge 中不起作用（实际上在 IE / Edge 中它也不能正确显示图像，但现在我很想为此责怪 IE）所以因为它不起作用在任何现代浏览器中，我猜这是我的错误。

这当然是一个非常简单的例子，SVG sprite 是由 grunt SVG-store 生成的几个图像的合成，但是如果我尝试在页面上显示单个图像，它确实可以正常显示：

所以 SVG 本身似乎是正确的。我还尝试在页面上仅放置一个内联精灵中的一个图像（稍作修改，使其成为上面的符号）并引用它，<use>它显示 OK。我尝试比较单个图像的 XML 及其在精灵中的符号，据我所知，它们是相同的（包括与<defs>图像相关的部分）。

我有 svg sprite 文件，如下所示：

我正在使用$mdIconProviderAngular 材料设计并grunt-svgstore构建我的精灵。

从上面的精灵中，我们看到了svgstore转换和制作symbol元素。然后以某种方式使用mdIcon它不起作用。但是如果我有一个像下面这样带有defs和svg元素的精灵文件。有用。

那么有没有一种方法可以让我配置svgstore像第二个那样制作精灵。或者$mdIconProvider使用第一个版本。