Отзывчивый многоугольник (треугольник) SVG - PullRequest
Новая
       7

Отзывчивый многоугольник (треугольник) SVG

1 голос
/ 21 марта 2019

Я пытаюсь создать страницу с 2-мя полигонами, но у меня возникают некоторые проблемы с соотношением сторон в мобильном режиме или режиме планшета.

Проверьте кодовое поле и измените размер окна, вы увидите, чтокрасный треугольник не сохраняет правильную форму, как и значок внутри.

Было бы очень приятно, если бы вы могли помочь мне в этом.

С наилучшими пожеланиями и большое спасибо 

body {
	overflow: hidden;
}	
.wrap-layer {
	position:absolute;
	top:0;	
	height:100%;	
	width:100%;
	min-height: 100%;
	min-width: 100%;
}
.content {
	position: absolute;
	z-index:1;
	top: 50%;		
	right:55%;
	color: #fff;
}
svg {
	width: 100%;
	height: 100%;
	min-height: 100%;
}
#play {
	content: "\e907";
	font-family: 'icomoon' !important;
	fill: #fff;
	font-size:5px;
}
<body>
	<div class="wrap-layer">
	
		<div class="content">
			<h1>Bla bla</h1>
			<p>lorem ipsum</p>
		</div>
		
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
			
			<polygon id="blue" points="80 0, 50 100, 0 100, 0 0" fill="#000" />
					
			<!-- HOW TO KEEP SHAPE OF THE RED TRIANGLE IN RESPONSIVE -->
			<!-- HOW ADD font icon and KEEP THE SHAPE -->
		    <g>
				<polygon id="trigger-play" points="50 100, 56 80, 62 100" fill="red" />
				 <text id="play" x=53 y=95>&#xe907;</text>
			</g>   
		</svg>
    </div>
</body>

Codepen: https://codepen.io/lulu2312/pen/oVQegd

1 Ответ

3 голосов
/ 21 марта 2019

Измените атрибут preserveAspectRatio="none" на: 

preserveAspectRatio="xMidYMax slice"

Часть xMid означает центр в направлении X.YMax означает выравнивание снизу в направлении Y.Цель этого - убедиться, что красный треугольник будет виден.slice означает увеличение SVG, чтобы он полностью заполнил родительский элемент, переполнив его при необходимости.В основном так же, как CSS background-size: cover.

. Вы можете узнать больше о том, как preserveAspectRatio работает в спецификации SVG.

https://www.w3.org/TR/SVG11/single-page.html#coords-PreserveAspectRatioAttribute

Если текущие углы иформы - это не то, что вам нужно, тогда вам нужно будет изменить дизайн SVG, чтобы у него было другое соотношение сторон.На данный момент это 1: 1 (квадрат). 

body {
	overflow: hidden;
}	
.wrap-layer {
	position:absolute;
	top:0;	
	height:100%;	
	width:100%;
	min-height: 100%;
	min-width: 100%;
}
.content {
	position: absolute;
	z-index:1;
	top: 50%;		
	right:55%;
	color: #fff;
}
svg {
	width: 100%;
	height: 100%;
	min-height: 100%;
}
#play {
	content: "\e907";
	font-family: 'icomoon' !important;
	fill: #fff;
	font-size:5px;
}
	<div class="wrap-layer">
	
		<div class="content">
			<h1>Bla bla</h1>
			<p>lorem ipsum</p>
		</div>
		
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMax slice">
			
			<polygon id="blue" points="80 0, 50 100, 0 100, 0 0" fill="#000" />
					
			<!-- HOW TO KEEP SHAPE OF THE RED TRIANGLE IN RESPONSIVE -->
			<!-- HOW ADD font icon and KEEP THE SHAPE -->
		    <g>
				<polygon id="trigger-play" points="50 100, 56 80, 62 100" fill="red" />
				 <text id="play" x=53 y=95>&#xe907;</text>
			</g>   
		</svg>
    </div>

https://codepen.io/PaulLeBeau/pen/BbGwKp

...