Элемент SVG с viewBox и preserveAspectRatio = "none" с прямоугольником внутри, только масштабирование с шириной контейнера div

Question

В коде у меня есть элемент svg с этими двумя атрибутами:

preserveAspectRatio = "none" viewBox = "0 0 500 300"

Прямоугольник внутри элемента svg находится в диапазоне 500x300. Когда я изменяю ширину контейнера div .holder в css, прямоугольник масштабируется, но настройка высоты, кажется, не влияет на это. Кажется, хотят сохранить соотношение сторон.

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>