Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
635 views
in Technique[技术] by (71.8m points)

css - Background image tiles have gap between them when using SVG image. How to solve in Chrome?

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.

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.

After a bunch of Google searches and searching here on SO I haven’t found any similar reports. Maybe someone here has a solution.

Here is my test code:

<!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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" 

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"

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...