使用 SVG 图像时，背景图像图块之间存在间隙。如何在 Chrome 中解决？答案

【问题标题】：Background image tiles have gap between them when using SVG image. How to solve in Chrome?使用 SVG 图像时，背景图像图块之间存在间隙。如何在 Chrome 中解决？
【发布时间】：2012-06-27 09:52:53
【问题描述】：

当我使用 SVG 图像作为页面主体的平铺背景时，平铺之间存在细微的间隙。如果我切换到文件的 PNG 版本，则不会发生。

我正在使用最新版本的 Mac 版 Google Chrome – 版本 19.0.1084.56。我没有测试过 Windows，因为我没有那个平台。文件在 Safari 和 FF 中按预期工作。

经过大量 Google 搜索并在 SO 上搜索后，我没有找到任何类似的报告。也许这里有人有解决方案。

这是我的测试代码：

<!DOCTYPE html>
<html>
<head>
<title>SVG background test</title>
<style type="text/css">
body {
   background-color: #FFF;
   background-image: url(img/assets/background.svg);
   background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>

【问题讨论】：

标签： google-chrome css svg background-image

【解决方案1】：

事实证明，这不仅发生在 Chrome 中，而且在该浏览器中更为明显。正如我在上面发布的，这是解决方案：在阅读了一个稍微不同的 Chrome/svg 问题的解决方案后，我找到了答案。发回这里以防其他人遇到此问题。我在 Illustrator 中创建了我的 SVG 文件。显然我的画板/图像大小不是精确的像素。我通过在文本编辑器中打开我的 SVG 文件并查看文件顶部发现了这一点：

width="229.9999px" height="147.4256px"

我在 illustrator 中打开了 svg 文件并确保尺寸完全是偶数像素，然后在文本文件中再次检查。更正的尺寸为：

width="230px height="148px"

由于某种原因，简单地编辑文本文件中的值对我来说不起作用，但是在 Illustrator 中修复比弄清楚如何正确编辑 svg 文本文件更快。无论如何，现在我的瓷砖上没有缝隙。希望能帮助其他人，如果他们遇到这个问题。

【讨论】：

这并不能解决我的问题。我有一个宽度为 100 像素、高度为 100 像素的 svg 文件，但这里仍然存在差距。有趣的是，Firefox 似乎没有这个问题。
天才！谢谢你
这可能会导致该错误在 100% 缩放级别消失，但它并不能消除 2019 年仍然存在的浏览器渲染错误。在各种缩放级别，重复之间仍然存在差距SVG 用作 CSS 背景。

【解决方案2】：

有四件事需要寻找（这个答案是为其他最终在这里寻找解决方案的人准备的）：

确保 height 和 width 是整数，也就是“没有小数部分”（如 Violet 所述，没有小数）
示例：height="326.25" 与 height="326"
确保您的 viewbox 也是整数
示例 viewBox="0 0 306.25 753" 与 viewBox="0 0 306 753"
而且如果有视口，还可以设置preserveAspectRatio属性
Learn More On MDN
另外需要注意的是在svg 标签中设置了高度和宽度属性。这解决了 IE background-size 大小问题。 This is a good article about it.

在我的情况下，SVG 在 Chrome 中正确重复，但在 Firefox 中存在差距，直到我将所有属性都设置为整数。

【讨论】：

【解决方案3】：

这不是宽度或高度的问题。即使您的 svg 模式是 100px x 100px 并且没有小数点，它也会出现。

您可以解决将 preserveAspectRatio="none" 放入 svg 文件的问题：<svg preserveAspectRatio="none" ...>

但是当你想重复一个 svg 模式时你不能选择这个选项，因为你的模式会被扭曲。

你找到答案了吗？

【讨论】：

如果您还有其他问题，请点击按钮进行提问。
将坐标更改为整数对我在 Firefox 中偶尔出现的间隙没有任何帮助。 preserveAspectRatio="none" 效果很好，谢谢。