svg背景垂直重复的间隙答案

【问题标题】：Gap in vertical repeat of svg backgroundsvg背景垂直重复的间隙
【发布时间】：2020-10-06 20:44:49
【问题描述】：

我有一个简单的 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>");
}

&lt;div class="bg"&gt;&lt;/div&gt;

这是有原因的吗？

【问题讨论】：

标签： html css svg

【解决方案1】：

这是由于background-size:contain 和您的 svg 的像素尺寸的结合而发生的。

您看到浏览器尝试缩放图像，以便没有任何内容超出您的<div> 的范围。当您将该缩放比例与 171 的图像像素尺寸（不能均匀地乘以 2000 像素）相结合时，您会得到显示浏览器试图显示的子像素的线条。

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

编辑：

如果您需要包含宽度，有一些技巧可以帮助您获得更好的结果。

将背景图片尺寸设为 10 的倍数。正方形最好使用 100x100 像素，但也可以是矩形（尽量接近您的目标宽度），例如 1000x100 像素。
设置background-size: 100% auto 而不是contain。这将按比例拉伸图像以填充容器宽度。
使用background-repeat: repeat-y 强制垂直重复，以便浏览器只在一个轴上进行数学运算。

【讨论】：

删除 background-size:contain 是一个顿悟
感谢您的洞察力。这是我遇到的问题的低保真版本。重点是在垂直重复的同时水平适应 SVG。但实际上，它适用于我在此处指定的问题。
好吧，只要您强制浏览器执行不会导致整数的数学运算，您就会遇到同样的问题。创建尺寸为 10 的倍数（100、1000 等）的图像会有所帮助，但不会完全缓解问题。

【解决方案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，但可能对您的情况有用。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

<rect shape-rendering="crispEdges">

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

【讨论】：