path сделать адаптивным

288

19 февраля 2018, 01:12

Есть такой svg в коде на фон, и он растягивается на всю страницу как положено, но path внутри него почему-то не заполняет весь экран:

html, 
body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.bg { 
  width: 100%; 
  height: 100%; 
} 
 
.bg svg { 
  width: 100%; 
  height: 100%; 
}

<div class="bg"> 
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 330"> 
  <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/> 
  </svg> 
</div>

Как сделать path внутри svg на всю ширину и высоту экрана?

Answer 1

Чтобы понять, где находятся границы svg, добавляем бордюр в шапку svg файла

style="border:1px solid red;" После настройки пропорций и размеров эта красная рамка будет не нужна, сотрите её.

Чтобы svg занял всё пространство контейнера добавляем внутри svg файла width="100%", height="100%" и команду preserveAspectRatio="none"

<style> 
html, 
body { 
  width: 100%; 
  height: 100%; 
  
} 
</style> 
<div class="bg"> 
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 330" preserveAspectRatio="none" style="border:1px solid red;" > 
  <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/> 
  </svg> 
</div>