# chunk chunk-common [mini-css-extract-plugin] Conflicting order.
# ASSET SIZE LIMIT
# SVG作为背景图片有缝隙
当将SVG图像用作页面正文的平铺背景时,这些平铺之间存在微小的间隙。如果我切换到该文件的PNG版本,则不会发生
我正在使用最新版本的MAC版Google Chrome版本19.0.1084.56(很多移动端?).
经过一堆Google搜索后,我没有发现类似的报告
测试代码
<!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>
# 答案
事实证明,这不仅发生在chrome上,而且在该浏览器中更加明显。正如我在上面发布的,这是解决方案:
在阅读了针对Chrome/SVG稍有不同的问题的解决方案后,我找到了答案。我在IIustrator中创建了SVG文件。显然我的画板/图像尺寸不是精确地像素。我是通过文本编辑器中打开SVG文件并查看文件顶部来发现这一点的。
width="229.999px" height="147.4256px"
我在iIIustator中打开了svg文件,并确保尺寸恰好是偶数像素。然后再次在文本文件中在此进行检查。更正的尺寸为:
width="230px" height="148px"
由于某种原因,仅编辑文本文件中的值对我不起作用,但再次说明,仅在Illustrator中修复比确定如何正确编辑svg文本文件要快。无论如何,现在我的瓷砖上没有缝隙了。希望这对其他人有帮助。