14

当我使用 SVG 图像作为页面主体的平铺背景时，平铺之间存在细微的间隙。如果我切换到文件的 PNG 版本，它不会发生。

我正在使用最新版本的 Mac 版 Google Chrome – 版本 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>
4

3 回答 3

11

事实证明，这不仅发生在 Chrome 上，而且在该浏览器中更为明显。正如我在上面发布的，这里是解决方案：在阅读了一个稍微不同的 Chrome/svg 问题的解决方案后，我找到了答案。发回这里以防其他人遇到此问题。我在 Illustrator 中创建了我的 SVG 文件。显然我的画板/图像大小不是精确的像素。我通过在文本编辑器中打开我的 SVG 文件并查看我看到的文件顶部发现了这一点：

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

我在 illustrator 中打开了 svg 文件并确保尺寸完全是偶数像素，然后在文本文件中再次仔细检查。更正的尺寸为：

width="230px height="148px"

出于某种原因，简单地编辑文本文件中的值对我来说不起作用，但是在 Illustrator 中修复比弄清楚如何正确编辑 svg 文本文件更快。无论如何，现在我的瓷砖上没有缝隙。希望能帮助其他人，如果他们遇到这个问题。

于 2012-07-05T23:39:00.457 回答
2

有四件事要寻找（此答案适用于最终在这里寻找解决方案的其他人）：

  1. 确保heightandwidth是整数，也就是“没有小数部分”（如 Violet 所述，没有小数）
    示例：height="326.25"vsheight="326"

  2. 确保你viewbox也是整数
    示例viewBox="0 0 306.25 753"vsviewBox="0 0 306 753"

  3. 如果你有视口，你还可以设置preserveAspectRatio属性
    Learn More On MDN

  4. 另一件需要注意的事情是在svg标签中设置了 height 和 width 属性。这解决了 IEbackground-size大小问题。这是一篇关于它的好文章。

在我的情况下，SVG 在 Chrome 中正确重复，但在 Firefox 中存在差距，直到我将所有属性设置为整数。

于 2016-02-26T18:43:48.330 回答
2

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

您可以解决将 preserveAspectRatio="none" 放入 svg 文件的问题：<svg preserveAspectRatio="none" ...>

但是当你想重复一个 svg 模式时，你不能选择这个选项，因为你的模式会被扭曲。

你找到答案了吗？

于 2016-10-12T16:46:43.720 回答