0

Высота нужна фиксированная, а как же сделать чтобы было по всей ширине контейнера?

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

svg.top-icon {
  width: 100%;
  height: 280px;
  margin: 0;
  padding: 0;
}
<div class="container">
  <svg class="top-icon" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="blue" stroke="#333333" stroke-width="1" d="M0,50 Q60,5 60,50" />
  </svg>
</div>

1 ответ 1

2

У вас длина фигуры 60 + половина толщины границы, а область просмотра (viewBox) по ширине 100. Надо уравнять.

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

svg.top-icon {
  width: 100%;
  height: 280px;
  margin: 0;
  padding: 0;
}
<div class="container">
  <svg class="top-icon" viewBox="0 0 60.5 100" preserveAspectRatio="none">
      <path fill="blue" stroke="#333333" stroke-width="1" d="M0,50 Q60,5 60,50" />
  </svg>
</div>

Ваш ответ

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

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