5

Есть такой 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 на всю ширину и высоту экрана?

1 ответ 1

7

Чтобы понять, где находятся границы 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>

4
  • спасибо, а прокрутка небольшая по обеим осям это из-за чего ? 16 фев 2018 в 14:14
  • @user3178479 очень долго объяснять, как svg позиционируется и масштабируется в этом конкретном примере. Уберите width height в стилях body и полоса прокрутки исчезнет 16 фев 2018 в 14:33
  • 1
    дошло, спасибо! 16 фев 2018 в 14:39
  • @user3178479 не за что:) Задавайте любые вопросы по svg, не стесняйтесь. Также можно спросить в чате по svg, если смогу на словах объяснить, то отвечу chat.stackexchange.com/rooms/70612/svg-chat 16 фев 2018 в 14:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.