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

Question

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

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

如果你能帮我完成这个就太好了。

致以诚挚的问候，非常感谢

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

Answer 1

将 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

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

Responsive polygon (triangle) SVG

html

css

svg

responsive