在基于 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://www.heropatterns.com/
用于测试的 Codepen：https://codepen.io/TelFiRE/pen/gJzqaG https://codepen.io/TelFiRE/pen/gJzqaG
图像之间的空间通常小于 1 像素（这意味着线条只是较浅的绿色阴影）。它很微妙，如果你的显示器很暗，可能很难看出来。
在提出这个问题时，我希望了解为什么它会以一种让我可以毫无问题地制作大量重复 SVG 背景的方式发生。这不仅仅是关于一张图像，所以我想尽可能避免使用黑客解决方案/解决方法。例如，从边缘切掉 2 个像素可以修复 99% 的问题，但不能完全修复，这让我想知道如果我真的需要这两个像素我会做什么。这个特殊的 SVG 看起来不错，但更复杂的图案会失去对齐。
似乎某些浏览器在重复使用 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 to a <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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
