Как уместить SVG на экране при смене ориентации?

Добрый день, уважаемые коллеги!

Рисую страницу, у которой есть статические header и footer, а всё пространство между ними должен занимать блок с SVG внутри

<!-- index.php -->
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
...
<body>
<div class="header">
	...
</div>
<div class="main">
	<div class="content">
		<svg id="main_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 132 132">
			<use xlink:href="/assets/image/main.svg#common" />
		</svg>
	</div>
</div>
</div>
<div class="footer">
    ...
</div>
</body>


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html{
	color: #fff;
    background-color: #000015;
	width: 100%;
	height: 100%;
    display: flex;
	flex-direction: column;
}

.header {
  width: 100%;
  flex: 0 0 auto;
}

.main {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
  width: 100%;
  background: #00000a;
}

@media screen and (orientation : portrait){
	.content {
		width: 100%;
	}
}

@media screen and (orientation : landscape){
	.content {
		height: 100%;
	}
}


При просмотре в портретной ориентации SVG с viewport квадратной формы умещается на экране, но если сменить ориентацию на ландшафтную, блок content занимает всю ширину экрана и экран становится scrollable. Если убрать SVG, то в ландшафтной ориентации блок content умещается на экране.

Как можно заставить блок с SVG сжиматься, чтобы умещаться на широком экране?
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 4
@DrWeyber
Попробуй jsом менять ей Viewbox в атрибутах, не уверен что сработает, но можешь попробовать поэкспериментировать с этим вьюбоксом
Ответ написан
@ArtJH
Попробуй поменять на
.main {
flex: 1 1 auto;
}
Ответ написан
melomanpenza
@melomanpenza
UX/UI дизайнер
Попробуйте заменить viewbox на wight и height и прописать 100%
Ответ написан
@meridbt Автор вопроса
Коллеги, спасибо за уделённое время, решение нашлось >>>ЗДЕСЬ<<<
Как работает посмотреть на >>>CODEPEN<<<
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы