Question

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

preserveAspectRatio =“无” viewBox =“ 0 0 500 300”

svg元素内的rect在500x300范围内。当我在CSS中更改容器div .holder的宽度时，rect会缩放，但设置高度似乎并不会影响它。似乎要保留纵横比。

https://codepen.io/anon/pen/oRBOdj?editors=1100

我将如何使svg始终缩放以适合.holder div内？

Answer 1

使用svg的宽度和高度

.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>

SVG元素包含viewBox和preserveAspectRatio =“ none”，矩形内部仅按容器div的宽度缩放

1 个答案: