Question

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

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

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

white space

如果我打开SVG来检查侧面是否有空格，那么没有任何东西（见右边的窗口）它会一直到窗口的一侧：

no white space on separate 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"作为回报，我可以使用background-repeat: repeat-x;

有关详细信息，请参阅以下文章：A Look At preserveAspectRatio in SVG

Answer 3

我不能保证这在您的情况下始终有效，甚至可以使用，但是您可以尝试以像素为单位而不是百分比来指定CSS背景尺寸。过去使用chrome对我有用。即background-size：50px 100px;

SVG背景重复之间的空白

3 个答案: