3

Помогите пожалуйста разобраться с 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>

  

0

1 ответ 1

5

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

6
  • 1
    @EgorG Если ответ вам был полезен, не забудьте отметить его. Я попытался полностью ответить на ваш вопрос. SVG находится в footer, занимает 15%, адаптивно. Сделал примерную вёрстку, которую вы можете заточить под себя, дополнительно сделал анимацию волн. Что-то ещё надо? Спрашивайте 4 апр 2020 в 5:33
  • 1
    Не могу не отметить и превосходную реализацию, а главное Ваше умение очень чётко и доступно объяснить не только способ, но и причины!
    – Denis640Kb
    4 апр 2020 в 10:26
  • Безусловно полезен!
    – EgorG
    4 апр 2020 в 15:32
  • @Alexandr_TT, подскажите пожалуйста еще один момент. Я пишу одностраничное приложение, оно будет состоять из двух ,так скажем, сущностей - фонового изображения и блока логики самого приложения. Причем блок логики будет в будущем располагаться с помощью position:absolute и z-index НАД фоновым изображением. Для фонового изображение мне нужно помимо волн добавить еще различных элементов. Как это правильно сделать, создать 1 общий svg-элемент и добавить туда все фигуры(волны и т.д.) или же сделать 1 общий div-элемент, а внутри нужные мне svg-элементы?
    – EgorG
    5 апр 2020 в 17:36
  • @EgorG Рассматривайте каждый svg, как отдельный блок, который можно разместить в свой родительский контейнер и верстать блоками, как обычно. Лучше задайте отдельный вопрос и я или другие ребята с удовольствием ответят. Можете схему набросать на отдельном листочке и кинуть эскиз, где что будет расположено и конечно приведите все возможные коды ваших svg 5 апр 2020 в 17:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.