SVG 背景重复之间的空白答案

【问题标题】：White Space Between SVG Background RepeatsSVG 背景重复之间的空白
【发布时间】：2015-04-09 22:42:06
【问题描述】：

我似乎无法摆脱 Illustrator CS5 导出的 SVG 元素重复（作为 CSS 背景）之间的空白。

我使用的是简单的 CSS background-image 和 background-repeat: repeat-x，但每次重复之间总是有这个空白。我根本没有使用background-size。

这是我所看到的（在 Safari/Chrome 上测试）：

如果我打开 SVG 以检查侧面是否有任何空白，则什么都没有（见右侧的窗口），它一直到窗口的一侧：

我尝试通过File -> Scripts -> SaveDocsAsSVG 和Save as.. -> SVG 将图像保存在Illustrator 中。

HTML

<body>
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</body>

CSS

.outer {
  background-color: #7fcefb;
  height: 700px;
  background-image: url('/wp-content/themes/grizzly/assets/img/trees.png');
  background-position: center 95%;
  background-repeat: repeat-x;
}

.inner {
  background-image: url('/wp-content/themes/grizzly/assets/svg/treeshill.svg');
  height: 700px;
  background-position: center bottom;
  background-repeat: repeat-x;
}

【问题讨论】：

您可以发布您的代码或链接吗？看起来某些东西可能有轻微的边距或填充。
你能把图片的链接贴出来吗？
添加了一些基本的 HTML 和 CSS 来显示设置。 SVG 下载 - s000.tinyupload.com/?file_id=02705325478483063668

标签： html css svg

【解决方案1】：

如果我认为是这样，请打开您的 SVG 文件并更改根 <svg> 元素，使其包含以下属性：

<svg ... preserveAspectRatio="none">

如果它已经有preserveAspectRatio 属性，只需将其更改为"none" 并重新加载。

【讨论】：

保罗 - 你就是男人！谢谢！是否必须添加，因为浏览器会自动稍微修改纵横比？
这是因为width/height 属性的纵横比与viewBox 属性中的宽度和高度值之间存在细微差别。
非常感谢，我为此苦恼了很久！
非常感谢，你让我很开心！
这并不能解决问题。在我可能想出测试的所有场景中，在所有现代浏览器中（看似）随机缩放级别，将 preserveAspectRatio 设置为 none 的重复 SVG 之间仍然有空白。

【解决方案2】：

preserveAspectRatio="none" 对我不起作用，因为它使 svg 占据其父容器的整个宽度。

取而代之的是参数：preserveAspectRatio="xMinYMax meet"，作为回报，我可以与background-repeat: repeat-x;一起使用

更多信息，这里有一篇优秀的文章：A Look At preserveAspectRatio in SVG

【讨论】：

与preserveAspectRatio="xMinYMax meet" 我仍然看到差距。虽然preserveAspectRatio="xMinYMax slice" 对我有用。

【解决方案3】：

我不能保证这将始终有效，甚至在您的情况下也有效，但您可以尝试以像素而不是百分比的形式指定 css 背景大小。过去，这对我有用 chrome。即背景尺寸：50px 100px;

【讨论】：