Высота SVG ведет себя не так, как ожидалось

Не то чтобы это имело значение, но я использую https://getwaves.io/ для создания изображения SVG.

Что должно произойти

Синие волны должны занимать гораздо больше места по вертикали в сером прямоугольнике. Вроде как не использует object-fit: cover.

На самом деле, он должен соответствовать размеру прямоугольника, как ограничивающий прямоугольник.

Что я пытался далеко

Установите высоту и ширину на 100%
Установить соответствие объекта покрытию
Убедился, что есть окно просмотра
Убедитесь, что нет другой ширины и высоты

Пример

Он показывает, что изображение JPG работает нормально, но не изображение SVG.

Вопрос

Как я могу это исправить?

.wrap {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg, img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Just the SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  <path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>

SVG in a box - Does not work

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</div>

JPG in a box - Do work

<div class="wrap">
  <img src="https://placekitten.com/96/139">
</div>

saveAspectRatio="none" в SVG?

— 10.04.2022 16:02

css svg height object-fit

10.04.2022 15:57

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Четыре эффективных способа центрирования блочных элементов в CSS

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Поговорим о глассморфизме (Glassmorphism)

В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, вы можете использовать атрибут preserveAspectRatio="none" на <svg>. Это растянет SVG, если вы укажете высоту и ширину. Второй ваш путь был размещен примерно на 200 по оси Y. Таким образом, когда он растягивается, прозрачная область над контуром также будет занимать больше места. Я переместил путь так, чтобы он почти совпадал с y=0 сверху. Теперь путь занимает только 113 в высоту, и при растяжении он заполнит всю коробку.

Я использовал SvgPathEditor для редактирования пути.

.wrap {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg, img {
  height: 100%;
  width: 100%;
}

Just the SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
  <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>

SVG in a box - Does not work

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
    <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
  </svg>
</div>

JPG in a box - Do work

<div class="wrap">
  <img src="https://placekitten.com/96/139">
</div>

Ваш ответ действительно охватывает все и даже больше. Блестяще, спасибо!

— 10.04.2022 16:56

10.04.2022 16:52