Как создать фон SVG, который растягивается, а не плитки?

У меня есть SVG-фон, который я хочу использовать, и я не могу понять, как сделать его растянутым по всей странице, не говоря уже о фоне. Кто-нибудь может помочь?

(Страницы W3Schools, как на SVG, так и на фоне, ничего мне не дали).

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> не работает.

Ответы

Ответ 1

Я думаю, вы спрашиваете, можете ли вы заставить SVG искажать и растягивать, как это сделал бы PNG. Это, к сожалению, не невозможно, если только ваши SVG-коды не настроены таким образом (скажем, если ваш SVG сгенерирован иллюстратором, он просто не сделает этого).

Единственный способ сделать это на данный момент - передать код SVG. Например, вместо того, чтобы рисовать диагональную линию с заданным углом, вы можете указать SVG подключить верхний левый угол к нижнему правому углу. Если у вас есть SVG, я мог бы рассказать вам, как передать код. (Если ваш SVG сложен как тигр Фрогз, это, скорее всего, будет невозможно...)

Также для большинства современных браузеров вы можете просто добавить атрибут preserveAspectRatio="none" в тег svg. Если у вас есть файлы .svg, вам нужно открыть файл с возвышенным текстом и добавить код в тег svg (что-то вроде <svg version="1.1"...(hundreds of lines of codes followed) и вы сделаете это <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).

Ответ 2

Вы хотите свойство CSS3 background-size:

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

Демо: http://jsfiddle.net/JknDr/1/

Если вы хотите, чтобы он масштабировался непропорционально, чтобы заполнить контейнер (так что фон растягивается и сквозит), используйте background-size: 100% 100%.

Ответ 3

Я просто понял это. В вашем <svg> вам необходимо:

  • удалите свойства width и height например: width="375" height="137"
  • добавить это свойство preserveAspectRatio="none"
  • добавьте свойство viewbox (содержащее ваши исходные ширину и высоту, которые вы только что удалили viewBox="0 0 375 137"

В вашем файле CSS на элементе, который содержит фон SVG:

  • добавить свойство: background-size: 100% 100%;

Ключевой проблемой для меня было то, что мой SVG файл не содержал свойства viewbox.