SVG фоновое изображение

Question

Помогите пожалуйста разобраться с svg.
Хочу сделать фоновое svg-изображение(класс .canvas) на весь экран.
Оно будет состоять из нескольких разбросанных по экрану элементов, один из которых это волны(класс .waves), они должны располагаться у нижнего края экрана и занимать около 15%, но вместо этого они просто растягиваются во всю высоту экрана.
Подскажите пожалуйста, как можно решить эту проблему, я подозреваю, что дело во viewBox, но мои попытки его изменить делают картину еще хуже.

  .canvas {
        display: block;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }
    .waves {
        display: block;
        width: 100%;
        height: 15%;
        background: linear-gradient(to top, rgb(71,88,112), rgb(71,82,107));
    }

 <svg className='canvas'>
            <svg className="waves"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 25 150 28"
                preserveAspectRatio="none">
                <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" />
                </defs>
                <g className="parallax">
                    <use xlinkHref="#gentle-wave" x="50" y="0" fill="rgb(68,88,129)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="3" fill="rgb(30,42,73)"/>
                    <use xlinkHref="#gentle-wave" x="50" y="6" fill="rgb(37,50,80)"/>  
                </g>
                
            </svg>
        </svg>

Answer 1

волны(класс .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>

БЛОГ НА HUSL

SVG фоновое изображение

Ответы (1 шт):