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