Question

在基于Webkit和Blink的浏览器中，SVG无法正确平铺。在不同缩放级别的图像之间有一个空间。在StackOverflow上有很多主题可以解决此问题，这些主题都标记为已解决，但是这些人一定还没有对他们的解决方案进行过充分的测试。

我的SVG的像素数完全是偶数（130 x 24）。它们的背景尺寸设置为130px 24px。它们被设置为preserveAspectRatio =“ none”。 SVG边缘上的空白绝对为零。

但是，虽然看起来100％不错，但是如果放大到正确的水平，SVG之间仍然存在很小的空间。

令我惊讶的是，鉴于广泛建议将SVG用作背景，因此这个错误从未被报道过。

这是确切的SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 130 24" xml:space="preserve" preserveAspectRatio="none">
    <style type="text/css">
    	.st0{fill:#A5EF8B;}
    </style>
    <path class="st0" d="M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0"/>
    </svg>

我也可以通过其他SVG（例如，https://www.heropatterns.com/上的SVG）来确认这种行为

用于测试的Codepen：https://codepen.io/TelFiRE/pen/gJzqaG

图像之间的间隔通常小于1像素（这意味着线条只是较浅的绿色阴影）。这很微妙，可能很难看清显示器是否呆滞。

在问这个问题时，我希望了解它的发生原因，使我可以重复使用许多SVG背景而不会出现问题。这不仅是一张图片，所以我想尽可能避免使用骇人听闻的解决方案/解决方法。例如，从边缘切掉2个像素可以将其固定在99％的位置上，但并非完全固定，这让我想知道如果我实际上需要这两个像素该怎么办。这种特殊的SVG看起来像这样，但更复杂的样式将被剔除。

Answer 1

似乎某些浏览器确实无法重复使用SVG图片制成的背景。

对此的一种解决方案是改为在SVG内部进行重复。我们可以使用<pattern>元素来定义重复图案，并使用它来填充矩形。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="24">
  <defs>
    <pattern id="bg" patternUnits="userSpaceOnUse" width="130" height="24">
      <path fill="#A5EF8B" d="M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#bg)"/>
</svg>

当用作background-image到<div>时，它变为：

div {
  margin: 4rem 0;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='24'%3E%3Cdefs%3E%3Cpattern id='bg' patternUnits='userSpaceOnUse' width='130' height='24'%3E%3Cpath fill='%23A5EF8B' d='M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23bg)'/%3E%3C/svg%3E");
  background-size: 100% 24px;
  background-repeat: no-repeat;
}

<div></div>

Answer 2

这是您的svg，用作CSS背景，没有任何空白。我已经使用this tool

对svg进行了编码

还请阅读Optimizing SVGs in data URIs

body{background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 130 24' xml:space='preserve' preserveAspectRatio='none'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23A5EF8B;%7D %3C/style%3E%3Cpath class='st0' d='M0,12c32.5,0,32.5,12,65,12s32.5-12,65-12V0C97.5,0,92.9,12,65,12C32.5,12,20.7,0,0,0'/%3E%3C/svg%3E%0A");
background-size:130px 24px}

更新

显然，在Safari中，svg背景图像的重复之间存在间隙。在下一个示例中，我将设置background-size:12vw（或vw的任何其他倍数），间隙将消失。

事实上，我也简化了路径。

body{  
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 6 130 26' width='100%' height='100%'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23A5EF8B; fill:none; stroke-width:12;%7D %3C/style%3E%3Cpath class='st0' d='M-1,12c32.5,0,32.5,12,65,12s32.5-12,69-12'/%3E%3C/svg%3E%0A");
background-size:12vw}

Answer 3

每个svg文件都具有以下属性：“填充”和“描边”。填充是填充，笔划是轮廓。这两个空间都是默认的透明胶片。编辑SVG文件并将其添加到以下代码中：

.st0 { fill: #A5EF8B; stroke: #A5EF8B; }

enter image description here

SVG作为CSS背景-是否有任何方法可以重复x，而在两者之间没有空格？

3 个答案:

更新