带有viewBox和preserveaspectratio=“none”的SVG元素，其rect内部仅带有容器div的宽度缩放

Question

在codepen中,我有一个svg元素,它具有以下两个属性：

preserveAspectratio=“none”viewbox=“0 0 500 300”

Answer 1

为svg同时使用width和height

.holder {
  height: 400px;
  width: 90vw;
  border: 1px solid black;
}

<div class="holder">
<svg viewBox="0 54 500 246" height="400" width="100%" preserveAspectRatio="none">
   <g>
     <polyline fill="rgba(0, 0, 255, 0.3)" points="0, 245 44, 245 44, 190 47, 190 47, 245 91, 245 91, 136 98, 136 98, 245 132, 245 132, 136 136, 136 136, 190 139, 190 139, 136 142, 136 142, 245 196, 245 196, 190 199, 190 199, 245 243, 245 243, 136 250, 136 250, 245 284, 245 284, 136 287, 136 287, 190 291, 190 291, 136 294, 136 294, 245 348, 245 348, 136 351, 136 351, 190 395, 190 395, 54 398, 54 398, 81 401, 81 401, 245 436, 245 436, 136 439, 136 439, 190 443, 190 443, 136 446, 136 446, 245 500, 245 500, 136 500, 300 0, 300">     
     </polyline>
  </g>    
</svg>
</div>