5

Есть такой блок svg:

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

body {
  background: #ccc;
}
<svg id="overlay" viewBox="0 0 300 300">   
  <path id="end" d='M0,0 L300,0 L300,300 L0,300 Z'/>
</svg>

Можно ли растянуть svg на всю высоту и ширину блока без пробелов по бокам или вверху и внизу? Сейчас он пропорционально меняет свои размеры.

Не обрезать и не ставить на фон, так как в оригинале форма не совсем квадрат, как в примере, а волнистая поверхность. Просто для примера:

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

body {
  background: #ccc;
}
<svg id="overlay" viewBox="0 0 300 300">   
    <path id="end" d='M0,0 L150,50 L300,0 L250,150 L300,300 L150,250 L0,300 L50,150 Z'/>
  </svg>

1 ответ 1

6

Чтобы растянуть на всю длину без сохранения пропорций - preserveAspectRatio="none"

html,body, svg {
  width: 100%; height: 100%;
   margin: 0; padding: 0;
 <svg id="overlay" viewBox="0 0 300 300" preserveAspectRatio="none">   
        <path id="end" d='M0,0 L150,50 L300,0 L250,150 L300,300 L150,250 L0,300 L50,150 Z'/>
      </svg>

10
  • 1
    Во, то что нужно! Спасибо!
    – SVE
    Commented 5 дек. 2017 в 15:03
  • Если честно, то пока сама не знаю что хочу)) Модальное или просто блок, на overlay которого будет стоять svg (nbgf nfrjuj codepen.io/semenchenko/pen/EbpPgX) и при открытии этот overlay должен из центра увеличиваться с плавно изменяющимися границами (неровности этого прямоугольника немножко видоизменяются, эффект волны) =)))
    – SVE
    Commented 6 дек. 2017 в 12:15
  • 1
    Спасибо, подумаю еще, а то идея, вроде, есть, а вдохновения что-то нет и нет ))
    – SVE
    Commented 6 дек. 2017 в 12:50
  • 1
    @HamSter посмотри, перевел статейку по созданию и анимации облаков ru.stackoverflow.com/a/754793/28748 можно сделать другую анимацию, как ты задумывала с изменением размеров, краев и т.д Commented 6 дек. 2017 в 17:32
  • 1
    Вот идея - codepen.io/semenchenko/pen/JMWEWe?editors=1010 НО, не могу реализовать плавность, чтобы визуально казалось, будто клякса растекается по экрану, не хватает эластичности и плавности. ИЛИ хотя бы по плавности как тут codepen.io/hbuchel/pen/qLxAB?limit=all&page=2&q=morph
    – SVE
    Commented 28 дек. 2017 в 10:52

Ваш ответ

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

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