SVG background - фиксированная высота

Question

У меня вопрос к формату SVG. Я создал фон, как вы можете видеть на прилагаемом скриншоте.

Когда у меня разрешение экрана более 920 пикселей, это нормально. Но когда я проверяю адаптивные виды, синее изображение SVG уменьшает значение высоты, уменьшая windows.

Моя цель состоит в том, чтобы сохранить структуру волны и высоту, потому что должно быть lo go поверх фона. Но когда я уменьшаю окно, lo go больше не находится в синей волне.

Фиксированная высота в данных svg также плоха, потому что мы не сохраняем полную структуру волны.

Как это возможно?

Нужен ли родительский div с background-position: cover?

Код:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#230A59" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,192C384,160,480,128,576,133.3C672,139,768,181,864,192C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>'

Answer 1

То, что вы просите, невозможно. Вы не можете сохранить соотношение сторон, полную структуру волны и высоту. Лучшее, что вы можете сделать, - это две из трех таких вещей.

Соотношение сторон + полная волна

svg {
  background-color: #fd490d;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#230A59" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,192C384,160,480,128,576,133.3C672,139,768,181,864,192C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>

Соотношение сторон + высота

svg {
  background-color: #fd490d;
  width: 100%;
  height: 320px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="xMidYMid slice"><path fill="#230A59" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,192C384,160,480,128,576,133.3C672,139,768,181,864,192C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>

Полная волна + высота

svg {
  background-color: #fd490d;
  width: 100%;
  height: 320px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#230A59" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,192C384,160,480,128,576,133.3C672,139,768,181,864,192C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>