Question

我正在尝试建立一个包含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

Answer 1

将preserveAspectRatio="none"属性更改为：

preserveAspectRatio="xMidYMax slice"

xMid部分是指X方向上的中心。 YMax表示底部在Y方向上对齐。这样做的目的是确保红色三角形可见。 slice意味着增长SVG，以使其完全填充父级，必要时会溢出。与CSS的background-size: cover基本相同。

您可以在SVG规范中进一步了解preserveAspectRatio的工作方式。

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

响应多边形（三角形）SVG

1 个答案: