Question

我有一个简单的div，将SVG设置为具有垂直重复的背景图像。在Chrome和Firefox上，根据屏幕尺寸的不同，我会看到不同的间隙（请调整窗口大小）。

https://jsfiddle.net/bartadaniel/ejtvy7po/9/

.bg {
  width: 50%;
  height: 2000px;
  display: block;
  background-repeat: repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'> <rect class='cls-1' width='272' height='171' fill='green'/></svg>");
}

<div class="bg"></div>

这是有原因的吗？

Answer 1

之所以发生这种情况，是因为background-size:contain和svg的像素尺寸的组合。

您正在看到浏览器尝试缩放图像，以使<div>的边界不会溢出。当您将该缩放比例与图像像素尺寸为171（不能均匀地乘以2000px）结合使用时，会看到显示您正在浏览器试图显示的子像素的行。

只需删除background-size:contain即可解决。

编辑：

如果您需要包含宽度，可以使用一些技巧来获得更好的结果。

使背景图像的尺寸为10的倍数。正方形最好使用100x100px之类的东西，但也可以是1000x100px之类的矩形（尝试接近目标宽度）。
设置background-size: 100% auto而不是contain。这将拉伸图像比例以填充容器的宽度。
使用background-repeat: repeat-y强制垂直重复，因此浏览器仅在一个轴上进行数学运算。

Answer 2

这是子像素渲染的问题。每个浏览器的舍入均不同，并且SVG亚像素渲染非常混乱。

我建议您编辑SVG内容，使其比视图框大一些。

<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'>
  <rect class='cls-1' y='-.5' width='272' height='172' fill='green'/>
</svg>

显然，此技巧不适用于所有背景SVG，但可能对您有用。

Answer 3

不幸的是，唯一能够可靠解决该问题的解决方案是将SVG转换为基于像素的格式，例如JPG。显然，浏览器在缩放像素时没有问题，但是在缩放基于矢量的格式时会在边缘产生副作用。

Answer 4

如果使用较少的抗锯齿效果仍然可以使SVG看起来可以接受，则可以使用shape-rendering属性更改SVG中形状的抗锯齿效果。示例：

<rect shape-rendering="crispEdges">

您可以在以下元素上使用它：<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>。

svg背景的垂直重复中的空白

4 个答案: