SVG не заполняет весь Viewport на мобильном вид - PullRequest
Новая
       48

SVG не заполняет весь Viewport на мобильном вид

1 голос
/ 02 мая 2020

У меня проблема со всеми волновыми SVG на моем сайте. Кто-нибудь знает, как заставить SVG заполнить весь видовой экран / ширину экрана?

Я использовал Волновой генератор SVG Я использовал , чтобы создавать волны, и использовал div. 

<nav>
<div> //align-content: space-between
   <svg>

   <main></main>

   <svg>
</div>
<footer>

Пробел между пу sh svg вверх и вниз и для получения текста в центре.

The Problem visualized with red arrows

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Это может быть проблема сгенерированного файла SVG. Вы можете управлять им с помощью простого CSS трюка. 

.svg-parent-div {
overflow: hidden;
width: 100%;
}

svg {
width: calc(100% + 2px);
margin-left: -1px;
}

ОБНОВЛЕНО

Точный код для вашего случая 

body {
overflow-x: hidden;
}

svg {
width: calc(100% + 2px);
max-width: calc(100% + 2px); /*important in your case*/
margin-left: -1px;
}
0 голосов
/ 04 мая 2020

Это может быть вызвано небольшой разницей между соотношением сторон SVG viewBox и соотношением сторон указанного (или рассчитанного браузером) SVG width и height.

Попробуйте добавление preserveAspectRatio="none" к элементу <svg> этого SVG. 

<svg ...  viewBox="..." preserveAspectRatio="none">

или, возможно: 

<svg ...  viewBox="..." preserveAspectRatio="xMidYMin slice">
...