问题标签 [svg-sprite]

我使用具有透明度的图像精灵，它适用于伪内容。我需要图像周围的彩色圆形边框。

这就是我到目前为止所拥有的：http: //codepen.io/anon/pen/bpmGaz

但是我需要它看起来像这样：

我可以用额外的伪内容来做到这一点（见下文），但代码有点乱。有没有更短的方法来做到这一点？

http://codepen.io/anon/pen/VaEwQy

我尝试使用大纲属性，但遗憾的是它不能跨浏览器使用边框半径。

我正在使用 gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite

是否可以使用不同大小的相同图标？在进行精灵之前，这很容易，事实上这是我最喜欢 SVG 的事情之一：

http://codepen.io/anon/pen/qZQvYN

然而，现在我使用的是精灵，我不能使用这个解决方案，因为背景大小来自 mixin。即使我覆盖了它，那么背景位置也会出错。

http://codepen.io/anon/pen/JXezaK

gul-svg-sprite 1.2.19

我在传递给 gulp-svg-sprite 以确定所创建文件的目的地的配置对象时遇到了很多麻烦。我已阅读有关输出目的地的文档部分，并阅读了有关此问题的其他StackOverflow 板。

这是 Gulp 任务：

这是我希望得到的：

相反，这就是我得到的：

我尝试更改 mode.dest 的值，或者将“dest”设置作为同级添加到“mode”，但这没有区别。基本上，无论我写什么，文件总是保存在同一个位置。我认为我的设置被忽略了。例如，如果我将 sprite:"mysprite.svg" 添加到模式设置中，该文件仍会在同一位置保存为“sprite.defs.svg”。

会发生什么？

我正在使用<use xlink:href>来引用我的svg文件。
它在我的本地运行良好，但当我从 CDN 引用它时会引发错误 (CORS)。看起来好像xlink:href不允许CORS请求，但我想知道是否有任何解决方案？

另一方面，我听说这种精灵技术在SVG2上已被弃用。那么，目前使用 sprite SVG 文件的最佳解决方案是什么，它适用于所有不同的浏览器，包括移动浏览器。

我有一个包含两个 svg use 元素的 html 页面：第一个引用内联 svg。第二个引用外部 svg 文件（相同的代码）。

我试图弄清楚为什么第二个示例不显示 svg 路径，即使内联的 SVG 代码与链接文件中的 SVG 代码完全相同。

https://s3.amazonaws.com/jagger/svg/index.html

我正在使用svg-sprite生成要通过以下<use>方法嵌入的 SVG spritesheet：

这非常适合通过 HTML 标记嵌入和设置图标样式。

但是，我还需要完全通过 CSS 嵌入图标的选项。例如，通过 CMS 所见即所得编辑器添加内容列表不应要求内容编辑器添加额外的 SVG 元素。

例如：

有没有办法使用<use>嵌入方法或类似方法来实现这一点？该解决方案还需要允许通过 CSS 为 SVG 着色。

我有一个通过 angular-cli 创建的 angular2 项目。在 webpack 中有一个加载器来加载 svg sprite 并从 svgs 列表中生成该 sprite。但是，当 angular-cli 不允许我更改 webpack.config 时，我如何在当前项目中使用此功能？

谢谢。

我正在尝试使用 SVG 的一部分作为平铺背景。但是，我在使它正常工作时遇到了很大的问题。

我认为一张图片最能说明问题： 演示图片

这是我的 CSS：

这是我用于演示的 SVG 代码：

如您所见，SVG 中的完整视图框为 0 0 360 100，当我在 CSS 中调用 SVG 时，我给它一个新的视图框 120 32 150 64，并相应地更改背景大小（尽管我我很确定这无论如何都应该无关紧要，因为无论大小，视图框定义的 svg 都应该扩展以填充容器，对吗？）。

我试过摆弄 SVG 中的视图框，使用宽度和高度，使用 preserveAspectRatio 属性，但到目前为止没有任何效果。我究竟做错了什么？

我有这个虚拟 svg 显示一个圆圈，里面有一些灰色的人物

当我使用带有模式符号的 gulp-svg-sprite 将其转换为精灵时，我得到了这个结果

现在灰色的图形脱离了圆圈，如果我将原始 svg 中的根 defs- 和 g-tags 直接复制到 symbol-tag 中，也会发生这种情况。我也尝试在符号版本中插入一个 clipPath，但没有运气。

我在这里想念什么？

我使用出色的svg-sprite作为cli从其他几个 svg 文件生成 svg sprite。大部分配置都已理解，我按预期获得了 svg 文件和关联的 css。我希望生成的 svg 文件始终具有相同的名称，而不是看起来具有短随机字符串的名称，但是我无法理解它的配置。有什么建议么？

• Github 仓库：https ://github.com/jkphl/svg-sprite
• 配置工具：https ://jkphl.github.io/svg-sprite/#json