волны(класс .waves), они должны располагаться у нижнего края экрана и
занимать около 15%, но вместо этого они просто растягиваются во всю
высоту экрана.
Чтобы svg был адаптивным, занимал всё пространство родительского контейнера, в вашем примере это весь footer
, необходимо, чтобы в шапке SVG был только viewBox
а ширина и высота svg должны быть убраны или указаны в относительных единицах. Это требование у вас выполнено - width
и height
отсутствуют.
Исправил некоторые неточности синтаксиса SVG, видимо это было написано для React <use xlinkHref
. нужно для svg писать xlink:href
Чтобы прижать footer к низу и сделать страничку адаптивной использовал flex
см. CSS
Я думаю, что лучше не использовать background для добавления SVG. Зачем он тогда нужен, если его использовать в качестве картинки. Не будет интерактивности и других плюшек SVG.
Я добавил инлайн волны SVG в footer и они будут целиком заполнять его, но не выходить за его пределы - 15% высоты. К тому же это даёт возможность их анимировать см. второй вариант.
Статичный вариант
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1 0 auto;
}
/* temp styles */
.header {
height:15%;
color:white;
font-size:48px;
text-align:center;
background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
}
.content {
color:black;
font-size:24px;
text-align:center;
height:90%;
background: #d3d3d3;
}
.footer {
color:white;
font-size:16px;
text-align:center;
background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
height:15%;
}
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div class="footer">footer
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class='waves'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 25 150 28"
preserveAspectRatio="xMinYMin meet">
<defs>
<path
id="gentle_wave"
d="m -150,44.4 c 30,0 58,
-18 87.7,-18 30.3,0 58.3,
18 87.3,18 30,0 58,-18 88,
-18 30,0 58,18 88,18 l 0,
34.5 -351,0 z" >
</path>
</defs>
<g class="parallax">
<use xlink:href="#gentle_wave" fill="#4C6294" x="50" y="0" />
<use xlink:href="#gentle_wave" fill="#526AA0" x="150" y="3" />
<use xlink:href="#gentle_wave" fill="#5F7CBB" x="100" y="3" />
</g>
</svg>
</div>
</body>
Динамичный вариант
Добавляем анимацию волн
<animateTransform attributeName="transform" type="translate" begin="0s" dur="12s" values="0,0;80,0;50,0;0,0" repeatCount="indefinite" />
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1 0 auto;
}
/* temp styles */
.header {
height:15%;
color:white;
font-size:48px;
text-align:center;
background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
}
.content {
color:black;
font-size:24px;
text-align:center;
height:90%;
background: #d3d3d3;
}
.footer {
color:white;
font-size:16px;
text-align:center;
background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
height:15%;
}
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
<div class="footer">footer
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class='waves'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 25 150 28"
preserveAspectRatio="xMinYMin meet">
<defs>
<path
id="gentle_wave"
d="m -150,44.4 c 30,0 58,
-18 87.7,-18 30.3,0 58.3,
18 87.3,18 30,0 58,-18 88,
-18 30,0 58,18 88,18 l 0,
34.5 -351,0 z" >
<animateTransform attributeName="transform" type="translate" begin="0s" dur="12s" values="0,0;80,0;50,0;0,0" repeatCount="indefinite" />
</path>
</defs>
<g class="parallax">
<use xlink:href="#gentle_wave" fill="#4C6294" x="50" y="0" />
<use xlink:href="#gentle_wave" fill="#526AA0" x="150" y="3" />
<use xlink:href="#gentle_wave" fill="#5F7CBB" x="100" y="3" />
</g>
</svg>
</div>
</body>