背景图像瓷砖使用SVG图像时，它们之间的差距。如何在Chrome中解决？(Background

当我使用SVG图像作为我的网页正文中的平铺背景，还有就是瓷砖之间有微小的间隙。如果我切换到文件的PNG版本，它不会发生。

我使用的是最新版本的谷歌浏览器为Mac - 版本19.0.1084.56。我没有测试Windows，因为我没有这个平台。文件将按预期在Safari和FF。

一堆的谷歌搜索和搜索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>

Answer 1:

事实证明，这不仅是发生了镀铬的，但它是在浏览器中更明显。正如我上面张贴，这里是解决方案：阅读解决方案略有不同的浏览器/ SVG的问题后，我想出了答案。万一有人在这里张贴回过这个问题上运行。我建立了我的SVG文件在Illustrator。显然，我的画板/图像大小是不是在精确的像素。我打开我的SVG文件在文本编辑器，看着我看到这个文件的顶部发现了这一点：

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

我在Illustrator打开SVG文件，并确保该尺寸都是一模一样偶数像素，然后双击文本文件再次检查。修正尺寸是：

width="230px height="148px"

出于某种原因，简单地编辑文本文件中的值，我没有工作，但随后又被快速地只是在Illustrator固定除了弄清楚如何正确地编辑SVG的文本文件。无论如何，现在我没有在我的瓷砖缝隙。希望帮助别人，如果他们有这个问题。

Answer 2:

有找四件事（这个答案是谁在这里结束了寻找一个解决方案的其他人）：

确保的height和width是又名整数“没有小数部分”（由紫提到的那样，没有小数）
例如： height="326.25" VS height="326"
确保你的viewbox也整数
例如viewBox="0 0 306.25 753" VS viewBox="0 0 306 753"
如果你有一个视窗，您还可以设置preserveAspectRatio属性
了解更多关于MDN
要注意的另一件事是有高度和宽度属性的设置svg标签。这解决一个IE background-size上浆问题。这是一个关于它的好文章。