gpt4 book ai didi

html - SVG 背景重复之间的空白

转载 作者:技术小花猫 更新时间:2023-10-29 12:17:19 24 4
gpt4 key购买 nike

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

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

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

white space

如果我打开 SVG 以检查侧面是否有任何空白,那里什么也没有(见右侧的窗口)并且它一直到窗口的侧面:

no white space on separate window

我尝试通过 File -> Scripts -> SaveDocsAsSVGSave 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;
}

最佳答案

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

<svg ... preserveAspectRatio="none">

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

关于html - SVG 背景重复之间的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28422533/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com