我正在尝试构建一个包含 2 个多边形的页面，但我在移动设备或平板电脑模式下遇到一些宽高比问题。
检查 codepen 并调整窗口大小，您会发现红色三 Angular 形和内部图标没有保持正确的形状。
如果您能帮助我完成此任务，那就太好了。
致以诚挚的问候和感谢
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></text>
</g>
</svg>
</div>
</body>最佳答案
将 preserveAspectRatio="none" 属性更改为:
preserveAspectRatio="xMidYMax slice"
xMid 部分表示 X 方向的中心。 YMax表示Y方向底部对齐。这样做的目的是确保红色三 Angular 形可见。 slice 意味着扩展 SVG，使其完全填充父级，必要时会溢出。与 CSS 的 background-size: cover 基本相同。
您可以详细了解 preserveAspectRatio 在 SVG 规范中的工作原理。
https://www.w3.org/TR/SVG11/single-page.html#coords-PreserveAspectRatioAttribute
如果当前的 Angular 和形状不是您想要的，那么您将需要重新设计 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></text>
</g>
</svg>
</div>关于html - 响应式多边形(三 Angular 形)SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55285216/