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

当我使用SVG图像作为我的页面正文的平铺背景时，这些图块之间存在细微差距。如果我切换到文件的PNG版本，它不会发生。使用SVG图像时，背景图像瓷砖之间存在间隙。如何在Chrome中解决？

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

经过一堆谷歌搜索和搜索这里所以我没有找到任何类似的报告。也许这里有人有一个解决方案。

这里是我的测试代码：

<!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>

来源

2012-06-26 Violet

事实证明，这不仅是发生了镀铬的，但它是在浏览器中更明显。正如我上面发布的，这里是解决方案：在阅读了一个稍有不同的Chrome/svg问题的解决方案后，我想出了答案。如果有人遇到这个问题，请回到这里。我在Illustrator中创建了我的SVG文件。显然，我的画板/图片尺寸并不是精确的像素。我打开我的SVG文件在文本编辑器和查看文件的顶部发现了这个我看到了这一点：

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

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

width="230px height="148px"

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

来源

2012-07-05 23:39:00 Violet

可能是一个舍入误差。 – Palec

这并不能解决我的问题。我有一个宽度为100px，高度为100px的svg文件，但这里仍然存在缺陷。有趣的是，Firefox似乎没有这个问题。 –

你天才！谢谢 – paulslater19

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

“没有小数部分”确保了height和width是又名整数（由紫提到，没有小数）
例子：height="326.25" VS height="326"
确保您viewbox也整数
Ë xample viewBox="0 0 306.25 753" VS viewBox="0 0 306 753"
如果你有一个视窗，您还可以设置preserveAspectRatio属性
Learn More On MDN
另一个要注意的是有高度和宽度属性在svg标签设置。这解决了IE background-size大小问题。 This is a good article about it.

在我的情况下，SVG在Chrome中重复，但有一个缺口在Firefox，直到我把我的所有属性为整数。

来源

2016-02-26 18:43:48

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

可以解决把preserveAspectRatio =“无”在你的SVG文件，因为它的问题：<svg preserveAspectRatio="none" ...>

但是，当你要重复SVG图形可以不选择此选项，因为你的模式将被扭曲。

您是否找到答案？

来源

2016-10-12 16:46:43 user3101788

如果还有其他问题，请点击[问问题]（// stackoverflow.com/questions/ask）按钮。 –

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

回答

相关问题