时间戳

首页 > 解决方案 > 响应式多边形（三角形）SVG

html - 响应式多边形（三角形）SVG

问题描述

我正在尝试用 2 个多边形构建一个页面，但我在移动设备或平板电脑模式下的纵横比方面遇到了一些问题。

检查codepen并调整窗口大小，您会看到红色三角形和里面的图标没有保持正确的形状。

如果你能帮助我完成这件事，那就太好了。

最好的问候和非常感谢

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>

代码笔： https ://codepen.io/lulu2312/pen/oVQegd

标签： htmlcsssvgresponsive

解决方案

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

preserveAspectRatio="xMidYMax slice"

零件表示 X 方向的xMid中心。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

推荐阅读