SVG背景重复之间的空白

时间：2022-11-20 18:32:00

I cannot seem to get rid of this white space between SVG element repeats (as CSS backgrounds) exported by Illustrator CS5.

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

I am using a simple CSS background-image and background-repeat: repeat-x but there is always this white space between each repeat. I am not using background-size at all.

我使用简单的CSS背景图像和背景重复:repeat-x但每次重复之间总是有这个空白区域。我根本不使用背景大小。

Here is what I am seeing (tested on Safari/Chrome):

这是我所看到的(在Safari / Chrome上测试):

SVG背景重复之间的空白

If I open the SVG to check for any whitespace on the side, nothing is there (see window on the right) and it goes all the way to the side of the window:

如果我打开SVG来检查侧面是否有空格,那么没有任何东西(见右边的窗口),它一直到窗口的一侧:

SVG背景重复之间的空白

I've tried saving the image in Illustrator by File -> Scripts -> SaveDocsAsSVG and Save as.. -> SVG.

我已尝试在Illustrator中按文件 - >脚本 - > SaveDocsAsSVG保存图像并另存为.. - > SVG。

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;
}

2 个解决方案

#1

26  

If it's what I think it is, open up your SVG file and change the root <svg> element so that it includes the following attribute:

如果它是我认为的,打开您的SVG文件并更改根 元素,使其包含以下属性: 

<svg ... preserveAspectRatio="none">

If it already has a preserveAspectRatio attribute, just change it to "none" and reload.

如果它已经具有preserveAspectRatio属性,只需将其更改为“none”并重新加载。

#2

6  

preserveAspectRatio="none" didn't work for me because it makes the svg to take the full width of its parent container.

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

Instead a take the parameters: preserveAspectRatio="xMinYMax meet" which in return I was able to use with background-repeat: repeat-x;

取而代之的是参数:preserveAspectRatio =“xMinYMax meet”作为回报,我可以使用background-repeat:repeat-x;

For more info here is an exellent article: A Look At preserveAspectRatio in SVG

有关更多信息,请参阅以下文章:在SVG中查看preserveAspectRatio

#1

26  

If it's what I think it is, open up your SVG file and change the root <svg> element so that it includes the following attribute:

如果它是我认为的,打开您的SVG文件并更改根 元素,使其包含以下属性: 

<svg ... preserveAspectRatio="none">

If it already has a preserveAspectRatio attribute, just change it to "none" and reload.

如果它已经具有preserveAspectRatio属性,只需将其更改为“none”并重新加载。

#2

6  

preserveAspectRatio="none" didn't work for me because it makes the svg to take the full width of its parent container.

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

Instead a take the parameters: preserveAspectRatio="xMinYMax meet" which in return I was able to use with background-repeat: repeat-x;

取而代之的是参数:preserveAspectRatio =“xMinYMax meet”作为回报,我可以使用background-repeat:repeat-x;

For more info here is an exellent article: A Look At preserveAspectRatio in SVG

有关更多信息,请参阅以下文章:在SVG中查看preserveAspectRatio

标签：

相关文章