在基于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/
用于测试的Codepen：https ://codepen.io/TelFiRE/pen/gJzqaG
图像之间的间隔通常小于1像素（这意味着该线条只是较浅的绿色阴影）。它很细微，可能很难看清显示器是否暗沉。
在问这个问题时，我希望了解为什么会发生这种情况，从而使我可以重复使用许多SVG背景而不会出现问题。这不仅是一张图片，所以我想尽可能避免使用骇人听闻的解决方案/解决方法。例如，从边缘切掉2个像素可以将其固定在99％的位置上，但并非完全固定，这让我想知道如果我实际上需要这两个像素该怎么办。这种特殊的SVG看起来像这样，但更复杂的模式将无法对齐。