svg на всю высоту и ширину
276
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? Экономия места?
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49912 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25875 visits
- Как через css изменить цвет png изображения? 11721 visits
- Blob video url download 11267 visits
- Php curl запрос через прокси с авторизацией 10662 visits
- Работа с captcha vk api 9470 visits
© "hostciti.net" 20.12.2025 | 09:41