白色 Space 在 SVG 背景重复之间

Question

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

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

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

如果我打开 SVG 以检查侧面是否有任何白色space，那里什么也没有（请参阅右侧的 window）并且它一直延伸到 window:

我已经尝试通过 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;
}

Answer 1

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

<svg ... preserveAspectRatio="none">

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

Answer 2

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

取而代之的是参数：preserveAspectRatio="xMinYMax meet"，在 return 中我可以使用 background-repeat: repeat-x;

有关更多信息，请参阅一篇精彩的文章：A Look At preserveAspectRatio in SVG

Answer 3

我不能保证这在您的情况下总是有效或什至有效，但您可以尝试以像素而不是百分比指定 css background-size。这在过去对我有用chrome。即 background-size: 50px 100px;

白色 Space 在 SVG 背景重复之间

White Space Between SVG Background Repeats

html

css

svg