使用 SVG 图像时，背景图像图块之间存在间隙.如何在 Chrome 中解决? [英] Background image tiles have gap between them when using SVG image. How to solve in Chrome?
问题描述
当我使用 SVG 图像作为页面主体的平铺背景时，平铺之间有轻微的间隙.如果我切换到文件的 PNG 版本，则不会发生.
When I use a SVG image as the tiled background for the body of my page, there is a slight gap between the tiles. If I switch to the PNG version of the file, it does not happen.
我使用的是 Mac 版 Google Chrome 的最新版本 – 版本 19.0.1084.56.我没有测试过 Windows，因为我没有那个平台.文件在 Safari 和 FF 中按预期工作.
I am using the latest version of Google Chrome for Mac – version 19.0.1084.56. I haven’t tested Windows because I don’t have that platform. File works as expected in Safari and FF.
经过一系列 Google 搜索并在 SO 上搜索后，我没有找到任何类似的报告.也许这里有人有解决方案.
After a bunch of Google searches and searching here on SO I haven’t found any similar reports. Maybe someone here has a solution.
这是我的测试代码:
<!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 问题的解决方案后，我找到了答案.发回这里以防其他人遇到此问题.我在 Illustrator 中创建了我的 SVG 文件.显然我的画板/图像大小不是精确的像素.我通过在文本编辑器中打开我的 SVG 文件并查看我看到的文件顶部发现了这一点:
This turned out not just to be happening it Chrome, but it was more noticeable in that browser. As I posted above, here is the solution: After reading a solution for a slightly different Chrome/svg problem I figured out the answer. Posting back here in case someone else runs across this issue. I created my SVG file in Illustrator. Apparently my artboard/image size was not in precise pixels. I discovered this by opening my SVG file in a text editor and looking at the top of the file I saw this :
width="229.9999px" height="147.4256px"
我在 illustrator 中打开了 svg 文件并确保尺寸完全是偶数像素，然后再次在文本文件中仔细检查.更正的尺寸为:
I opened the svg file in illustrator and made sure that the dimensions were exactly even pixels, then double checked again in the text file. Corrected dimensions were:
width="230px height="148px"
出于某种原因，简单地编辑文本文件中的值对我不起作用，但是再次在 Illustrator 中修复比弄清楚如何正确编辑 svg 文本文件要快得多.无论如何，现在我的瓷砖没有缝隙.如果其他人遇到此问题，希望对其有所帮助.
For some reason simply editing the values in the text file did not work for me, but then again it was faster to just fix in Illustrator than figure out how to edit the svg text file correctly. At any rate, now I do not have a gap in my tiles. Hope that helps someone else if they are having this problem.
这篇关于使用 SVG 图像时，背景图像图块之间存在间隙.如何在 Chrome 中解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
