Как разместить анимированное svg в background?

Question

[Прейс Дмитрий]

Здравствуйте.
Есть такая структура блока в лендинге. На фоне этого блока должен располагаться svg, на который прикручено порядочно анимации, те в background-image его вынести не получится.

<div class="wrapper">
  <div class="background">
    <svg viewBox="0 0 1426 793">...</svg>
  </div>
  <div class="content">...</div>
</div>

.wrapper {
  position: relative;
}
.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

Выглядит это так

Проблема заключается в том, что svg растягивается на всю ширину, на десктопах часть его вылезает вниз, за блок .wrapper, чего не видно, и вроде бы все отлично.


Но на меньших значениях ширины экрана (на мобилках в частности) высоты svg не хватает и остается пустое пространство



Разрабатываем студентами небольшой лендинг, и я если честно слабо понимаю что с этим можно сделать. Это проблема дизайнера, фронтендера или кого? Имеет ли смысл копировать svg на пустующее пространство, от чего просядет производительность, или можно решить эту проблему средствами css?

Спасибо за помощь.

P.S. Ссылка на гитхаб. Проблема в homepage
Github pages

Comments

[Vladimir]

что за школа или курс?

[Ankhena]

Я не поняла, почему нельзя разместить анимированную SVG на фон.

[Kvason]

либо растягиваешь на весь экран и ставишь самый маленький z-index, либо ставишь на фон и в background ставишь дата урл с твоей свгшкой, но это пройдет только если анимки прописаны в самой картинке

[Прейс Дмитрий]

Ankhena, здравствуйте.
Потому что svg анимируется внешним js скриптом, который компилится из ts. В добавок скорее всего немного погодя svg будет интерактивным, и хотелось бы это сделать без использования SMIL. Насколько я знаю со SMIL очень странная история, его вроде бы поддерживают все браузеры, а вроде бы и нет. Поэтому хочется перестраховаться и использовать средства css + js. Итого, насколько мне известно, возможности вставить svg картинкой не остается

[Прейс Дмитрий]

Komandir_Bublik, что вы имеете в виду? 1 курс мифи ивт, а курса веб разработки я в данный момент не прохожу.

[Ankhena]

Прейс Дмитрий, остается только вариант позвать дизайнера, чтобы перерисовал.
Либо портить пропорции svg.

[Прейс Дмитрий]

Ankhena, понял, спасибо большое

Answer 1

[ForSureN1]

width: 100%;
height: 100%;
for svg

Comments

[Прейс Дмитрий]

Здравствуйте.
Сам svg то растянется, а элементы, которые находятся в нем, те все path, останутся на месте. Потому что viewBox от этого не поменяется. Таким образом все равно остается пустое пространство

[ForSureN1]

Прейс Дмитрий, Тогда для svg напишите просто height: 100% для определенного размера экрана
, сам потестил, помогло

[Прейс Дмитрий]

ForSureN1, тогда на больших экранах будет пустое пространство(

Я пробовал так сделать и у меня в больной фантазии возникло два решения: первый это просто копировать svg на пустующее пространство, второй - через js вычислять растянулся ли svg на весь бэкграунд и в зависимости от того, какое пространство пустует, выставлять на svg inline стиль либо width 100% либо height 100%.

Если проблема не решится, то сделаю как во втором варианте

[ForSureN1]

Прейс Дмитрий, прописать height: 100% на media request, в моменте когда начинает уменьшаться

[Прейс Дмитрий]

ForSureN1, ну конечно)
Вы правы, мне в голову не пришло

Answer 2

[cssfish]

дело в соотношении сторон (ratio).
svg, как видно невооруженным взглядом, имеет rato 1426 : 793
У вас он вставлен в блок некой высотой (как я предполагаю, т.к. примера или кода не привели полного), и получается что: ширина плавает, высота фиксированная. Т.е. ratio плавает, и часть svg то подрезается, то наоборот "остается пустое пространство".
Чтобы это решить, svg надо затолкать в блок с фиксированным ratio. Делается он просто:

.background {
  position: relative;
}
.background:before {
  content:"";
  display: block;
  height: 0; // Опционально
  padding-top: calc( 100% * 793 / 1426 );  // Y / X   
}

и растягиваем svg внутри него

.background svg {
  display: block;
  position : absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; //  опционально
  height: 100%; // опционально
}

но это в случае если background блок самостоятельный. а у вас я гляжу он тоже куда-то растягивается, тогда ratio надо не на него вешать а на обертку, либо структуру как-то менять

Comments

[Прейс Дмитрий]

Здравствуйте.

У вас он вставлен в блок некой высотой (как я предполагаю, т.к. примера или кода не привели полного), и получается что: ширина плавает, высота фиксированная. Т.е. ratio плавает, и часть svg то подрезается, то наоборот "остается пустое пространство".

Да, вы правы, при изменении ширины экрана соотношение сторон всего блока .wrapper будет меняться, то есть на десктопах и на мобилках это будут далеко не одинаковые значения.
Поэтому и не получается засунуть svg в блок с фиксированным ratio, собственно потому что ratio у этой секции не фиксированный. Задача заключается в том, чтобы правильно растянуть этот svg так, чтобы он и на мобилках, и на десктопах покрывал весь фон секции.

Добавил в вопрос ссылку на гитхаб, если вам это будет полезно

[cssfish]

Прейс Дмитрий, можете прописать отдельный ratio под каждый диапазон.
в остальном неясно, в чем именно проблема у вас