SVG 作为 CSS 背景 - 有什么方法可以重复-x，中间没有空格？

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/ 上的那些

用于测试的代码笔：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

这是您用作 css 背景的 svg，没有间隙。我已经使用 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