SVG背景重复之间的空白
我似乎无法摆脱Illustrator CS5导出的SVG元素重复(作为CSS背景)之间的这个空白区域.
我使用的是一个简单的CSS background-image,background-repeat: repeat-x但每次重复之间总会有这个空格.我根本就没用background-size.
这是我所看到的(在Safari/Chrome上测试):
如果我打开SVG检查侧面是否有空格,那么没有任何东西(见右边的窗口),它一直到窗口的一侧:
我尝试用File -> Scripts -> SaveDocsAsSVG和保存在Illustrator中的图像Save as.. -> 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;
}
Pau*_*eau 33
如果它是我认为的那样,打开你的SVG文件并更改根<svg>元素,使其包含以下属性:
<svg ... preserveAspectRatio="none">
如果它已经有preserveAspectRatio属性,只需将其更改为"none"并重新加载即可.
- 这是因为``width` /`height`属性的宽高比与`viewBox`属性中的宽度和高度值之间存在细微差别. (2认同)
preserveAspectRatio="none" 对我不起作用,因为它使svg占用其父容器的整个宽度.
而是采取参数:preserveAspectRatio="xMinYMax meet"作为回报,我能够使用background-repeat: repeat-x;
有关更多信息,请参阅以下文章:在SVG中查看preserveAspectRatio
- 用`preserveAspectRatio ="xMinYMax符合"`我仍然看到差距.虽然`preserveAspectRatio ="xMinYMax slice""对我有用. (5认同)