Vio*_*let 9 svg google-chrome background-image css3
当我使用SVG图像作为页面正文的平铺背景时,图块之间会有一点间隙.如果我切换到文件的PNG版本,它不会发生.
我使用的是最新版本的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>
事实证明,Chrome不仅仅发生了这种情况,而且在浏览器中更为明显.正如我在上面发布的,这里是解决方案:在阅读了针对略有不同的Chrome/svg问题的解决方案后,我找到了答案.如果其他人遇到此问题,请回复此处.我在Illustrator中创建了我的SVG文件.显然我的画板/图像尺寸不是精确的像素.我通过在文本编辑器中打开我的SVG文件并查看我看到的文件顶部来发现这一点:
width="229.9999px" height="147.4256px"
我在illustrator中打开了svg文件并确保尺寸完全是偶数像素,然后在文本文件中再次检查.更正尺寸为:
width="230px height="148px"
出于某种原因,简单地编辑文本文件中的值对我来说不起作用,但是再次修复Illustrator比了如何正确编辑svg文本文件更快.无论如何,现在我的瓷砖没有间隙.如果他们遇到这个问题,希望能帮助别人.
| 归档时间： |
|
| 查看次数： |
4611 次 |
| 最近记录： |