SVG作为CSS背景-是否有任何方法可以在其中没有空格的情况下重复执行x? [英] SVG as a CSS Background - Is there ANY way to repeat-x with NO space in between?
问题描述
在基于Webkit和基于Blink的浏览器中，SVG无法正确平铺.在不同缩放级别的图像之间有一个空间.在StackOverflow上有很多主题可以解决此问题，这些主题都标记为已解决，但是这些人一定还没有对他们的解决方案进行过充分的测试.
In Webkit and Blink-based browsers, SVGs do not tile correctly. There is a space between the images at various zoom levels. There are a number of topics on StackOverflow addressing this, all marked as solved, but those people must not have tested their solutions thoroughly enough.
我的SVG的像素数完全是偶数(130 x 24). 它们的背景尺寸设置为130px 24px. 它们被设置为preserveAspectRatio ="none". SVG边缘上的空白绝对为零.
My SVGs are a perfectly even number of pixels (130 x 24). They have background-size set to 130px 24px. They are set to preserveAspectRatio="none". There is absolutely zero empty space on the edges of the SVG.
但是，尽管看起来100％不错，但是如果放大到正确的水平，SVG之间仍然存在很小的空间.
Yet, while it looks fine at 100%, there is still a thin space between the SVGs if you zoom in to the right level.
令我惊讶的是，鉴于广泛建议将SVG用作背景，因此这个错误以前从未被报道过.
It surprises me this bug has not been reported before, given the widespread recommendations of using SVGs for backgrounds.
这是确切的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/
I can confirm this behavior with other SVGs as well, such as the ones at https://www.heropatterns.com/
用于测试的Codepen: https://codepen.io/TelFiRE/pen/gJzqaG
Codepen for testing: https://codepen.io/TelFiRE/pen/gJzqaG
图像之间的间隔通常小于1像素(这意味着线条只是较浅的绿色阴影).这很微妙，可能很难看清显示器是否呆滞.
The space between the images is usually sub 1 pixel (meaning the line is just a lighter shade of green). It's subtle and may be hard to see if you have a dull monitor.
在问这个问题时，我希望了解它的发生原因，使我能够重复制作许多重复的SVG背景而不会出现问题.它不只是一张图片，所以我想尽可能避免使用骇人听闻的解决方案/解决方法.例如，从边缘切掉2个像素可将其固定在99％的位置上，但并非完全固定，这让我想知道如果我实际上需要这两个像素该怎么办.这种特殊的SVG看起来像这样，但更复杂的模式将被剔除掉.
In asking this question, I'm hoping to understand WHY it is occurring in a way that lets me make lots of repeating SVG backgrounds without issue. It's not just about the one image, so I want to avoid hacky solutions/workarounds if at all possible. For example, chopping 2 pixels off the edge fixes it 99% of the way, but not entirely, and it leaves me wondering what I would do if I actually needed those two pixels. This particular SVG looks okay like that but more complicated patterns would be knocked out of alignment.
推荐答案
似乎某些浏览器在重复由SVG图像制成的背景时确实存在问题.
It seems that some browsers do have trouble with repeating backgrounds made from SVG images.
对此的一种解决方案是改为在SVG内部进行重复.我们可以使用<pattern>元素定义重复图案，然后使用它来填充矩形.
One solution to this is to do the repeating inside the SVG instead. We can use a <pattern> element to define the repeating pattern and use that to fill a rectangle.
<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>
当用作<div>的background-image时，它变为:
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>
这篇关于SVG作为CSS背景-是否有任何方法可以在其中没有空格的情况下重复执行x?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
