Белое пространство между повторами SVG Background

Я не могу избавиться от этого пробела между повторами элементов SVG (как фонов CSS), экспортированных Illustrator CS5.

Я использую простой background-image CSS и background-repeat: repeat-x но всегда есть это пробел между каждым повторением. Я вообще не использую background-size.

Вот что я вижу (проверено в Safari/Chrome):

Если я открою SVG, чтобы проверить, нет ли каких-либо пробелов на стороне, ничего нет (см. Окно справа), и он проходит полностью в сторону окна:

Я попытался сохранить изображение в Illustrator с помощью File → Scripts → SaveDocsAsSVG и Save as.. → SVG.

HTML

<body>
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</body>

CSS

.outer {
  background-color: #7fcefb;
  height: 700px;
  background-image: url('/wp-content/themes/grizzly/assets/img/trees.png');
  background-position: center 95%;
  background-repeat: repeat-x;
}

.inner {
  background-image: url('/wp-content/themes/grizzly/assets/svg/treeshill.svg');
  height: 700px;
  background-position: center bottom;
  background-repeat: repeat-x;
}

Ответ 1

Если это то, что я думаю, откройте свой SVG файл и измените элемент root <svg> чтобы он включал следующий атрибут:

<svg ... preserveAspectRatio="none">

Если он уже имеет атрибут preserveAspectRatio, просто измените его на "none" и перезагрузите.

Ответ 2

preserveAspectRatio="none" не работал для меня, потому что он заставляет svg принимать всю ширину своего родительского контейнера.

Вместо этого возьмите параметры: preserveAspectRatio="xMinYMax meet" которые в свою очередь я смог использовать с background-repeat: repeat-x;

Для получения дополнительной информации здесь замечательная статья: A Look at preserveAspectRatio в SVG

Ответ 3

Я не могу гарантировать, что это всегда будет работать или даже работать в вашей ситуации, но вы можете попытаться указать размер фона CSS в пикселях, а не в процентах. Это работало для меня в прошлом с хромом. т.е. размер фона: 50px 100px;