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/

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, и нет пробелов. Я закодировал SVG, используя этот инструмент

Также, пожалуйста, прочитайте Оптимизация SVG в URI данных

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}

UPDATE

Видимо, в 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; }

введите описание изображения здесь