我使用 gulp（插件 gulp-svg-sprites）创建了一个精灵。在 Mozilla 中它正常显示，在 chrome 中我打开它 - 一切都发生了变化。
如果我从最终的 svg（gulp-svg2png 插件）生成一个 png-sprite，并包含它而不是 svg，那么它会在所有浏览器中正常显示。那些。我从浏览器的解释中了解到这恰恰是相关的。
怎么修？
我的 post-galp 精灵示例在这里。当使用 chrome 中的滑块调整大小时，也可以看到此错误（在最大放大倍率下清晰可见，白色 - 当背景反转时）。
在 Mozilla 中一切正常。
PS 我更新了 sprite - 我将其设置为viewBox所有元素都以"0 0. 没有帮助。
一口气设置：
gulp.task('svg-sprites:build', function () {
return gulp.src(options.theme.img_svg_src + '*.svg')
.pipe(svgSprite())
.pipe(gulp.dest(options.theme.img_src + 'dict'))
.pipe(filter(options.theme.img_src + 'dict/svg/*.svg'))
.pipe(gulp.dest(options.theme.img_src + 'dict'));
});
简答
viewBox="0 0 41 2023"从 SVG 中删除属性。但是，也可以删除 viewBox 的其余部分。您可以使用svgo（插件removeViewBox）自动执行此操作。长答案
当水平不是SVG中宽度的倍数时，这似乎是
Chrome与计算相关的错误。background-sizebackground-sizeviewBox看，你已经
background-size设置了 em:4.1em 202.3em(sprite.css:5)。图像的调整大小设置font-size为 2 到 14 px。初始值为font-size10px，因此当页面打开时，以像素为单位的背景大小为 41x2023 px，就像 SVG 中的 viewBox 一样。您可以注册background-size: 41px 2023px，一切都将保持不变。但如果您指定的像素小于：
background-size: 40px 2023px，我们将看到垂直偏移。尽管看起来情况应该变得更窄一点。因此，当您更改字体时，一切都会进行。如果将字体大小设置为 11px，则背景宽度将为
4.1em * 11px = 45.1px，这不是 41（原始 viewBox 的宽度）的倍数。下一个正常显示的字体值为 20px：background-size水平尺寸变为 82px，是 41 的倍数。我不会完全描述这个错误的所有功能（有时会出现，有时不会），但最重要的是解决方案很简单：
viewBox="0 0 41 2023"从 SVG 中删除属性。但是，viewBox您也可以删除其余部分。您可以使用svgo（插件
removeViewBox）自动执行此操作。例如gulp：您可能已经猜到
Chrome您看到的是上一个图标底部的主图标。这可能有很多原因，但主要有两个：对于某些
width="7" height="7" viewBox="0 0 7 7人，对于其他人viewBox="231 233 38 34你看，在这里我们必须使用 viewBox 移动图标。然后，如果你看一下，在本地运行 sprite 的 SVG 文件，你会看到很大的间隙，只是图标没有落入可见区域。为避免此类风险和误解，可能更容易找到具有相同属性的 SVG 图标。网上有很多这样的合集，直接按32x32大小排序；64x64；128x128...
为了清晰起见，我采用了您的 sprite 并对代码进行了一些格式化，但没有改变其本质。请注意，图标之间的垂直空间负责属性
viewport，通常不会指明，因为默认情况下它们是 x="0" y="0" - 这是左上角。在您的版本中，第一个图标 y="0"，第二个图标 - y="32"，然后 y="64" 也就是说，垂直定位完全取决于这些参数。第一个解决方案 - 您需要增加图标之间的间隙，即增加
Y下面的示例，因为它是，您看到图标之间几乎没有间隙。在第二个例子中，间隙增加了8px；y=0；40；80；120第二个选项
使用标签制作经典精灵并从精灵
<symbol>调用命令。<use><use>并且在所有浏览器中看起来都一样。一个块中带有图标的选项，缩进最少
红色边框是 SVG 边框，仅供查看，可以将其删除 -
border:1px solid red;我用它来调整填充。更新02/23/2017
此外，还有一个 SVG 社交图标块，带有指向社交网络的工作链接。性能测试：chrome、FF、Opera、Yandex
选项 1：删除 ViewBox 源文件
使用 gulp-imagemin 和 imagemin-svgo 插件删除 ViewBox：
选项 2：用图标字体替换 SVG 精灵
最好使用图标字体而不是精灵。而且这种方法有很多优点：
要生成图标字体，我会推荐这种组合：
从这一行中提取的样式碗
path: './styl/mixins/icon-font.styl'将如下所示：生成字体后，您所要做的就是将生成的 CSS 包含在您的站点中或将其嵌入主 CSS 文件中，然后像这样使用它：