svg на всю высоту и ширину

243
06 декабря 2017, 22:37

Есть такой блок 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>

Answer 1

Чтобы растянуть на всю длину без сохранения пропорций - 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>

Answer 2

Попробуй вот так:

html, body { margin:0; padding:0; overflow:hidden } 
svg { position:fixed; top:0; bottom:0; left:0; right:0 }
<svg id="overlay" viewBox="0 0 300 300">    
  <path id="end" d='M0,0 L300,0 L300,300 L0,300 Z'/> 
</svg>

Ps. Для чего такое применение SVG? Экономия места?

READ ALSO
Изменить верстку с position: sticky на что то лучше
CSS

Изменить верстку с position: sticky на что то лучше

На сайте infonadv

 266
Adminer autologin
MySQL

Adminer autologin

Привет! У меня имеется docker контейнер с установленным на нём Adminer-ом (бд percona)Хотел спросить совета - есть ли какая-либо возможность отключить...

 406
MySQL - максимальный размер поля id в Django
MySQL

MySQL - максимальный размер поля id в Django

Использую БД MySQL для DjangoВозник вопрос - а какое максимальное значение может хранить в себе поле id, которое создается по стандарту при миграции...

 263
Проблема обедающих философов
c#

Проблема обедающих философов

На что влияет если я добавлю OrderBy(index => index) или нет, у листа с вилками?

 283