Можно ли сделать свг на весь вьюпорт?

Question

hackuun @hackuun

Можно ли сделать свг на весь вьюпорт?

Есть ли возможность сделать этот свг на всю ширину и всю высоту (и при ресайзе) - https://codepen.io/dubdub/pen/YJdeYa

Вопрос задан более трёх лет назад
115 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

7 комментариев

hackuun @hackuun Автор вопроса

так появляется скролл в сторону. над растянуть изображение

Написано более трёх лет назад
hackuun @hackuun Автор вопроса

Ну и собвтенно где тут весь экран? https://codepen.io/dubdub/pen/YJdeYa

Написано более трёх лет назад
mr_molodoy @mr_molodoy

Вы бы вставили код в html файл (отдельно от codepen'a) для начала..
Если уже именно в codepen'e нужно что бы отступа не было - добавляйте position: absolute; для svg элемента.
Пример: https://codepen.io/vitaly-d/pen/EdGEpe

Написано более трёх лет назад
hackuun @hackuun Автор вопроса

mr_molodoy, я конечно извиняюсь, но у вас плохо со зрением? Или просто голову морочите?

Нормально видно что черный прямоугольник не на весь вььюпорт? Или не видно?
При чем тут абсолют для меня вообще загадка))

Написано более трёх лет назад
Moskus @Moskus

hackuun, это вы морочите всем голову.
Viewport - это окно browser-а.
А вы зачем-то тестируете во фрейме codepen-а.

Написано более трёх лет назад
Moskus @Moskus

hackuun, вы вместо того, чтобы неумело хамить, престаньте использовать слова, смысл которых не понимаете. Viewport в HTML - это не область в iframe. Это окно.
https://www.w3schools.com/css/css_rwd_viewport.asp

Написано более трёх лет назад
mr_molodoy @mr_molodoy

Нормально видно что черный прямоугольник не на весь вььюпорт? Или не видно?

Нормально, что черный прямоугольник - polygon а не svg? SVG корректно тянется на всю область viewport'a.

Формулируйте вопросы точнее.

При чем тут абсолют для меня вообще загадка)

Вы писали про скролл, который появляется в codepen'e.
Абсолютное позиционирование решает проблему с отступом в один пиксель внутри iframe.

Если бы сразу спросили как растянуть содержимое под svg, то я бы Вам сразу и написал, что бы использовали preserveAspectRatio = "none" для SVG элемента.

Пример: https://codepen.io/vitaly-d/pen/EdGEpe

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 8 часов назад
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- вчера
- 128 просмотров
0

ответов
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
HTML

Простой
Как записать кол-во успешных прохождений капчи/пароля на js?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 142 просмотра
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 219 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 104 просмотра
1

ответ
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- 16 дек.
- 81 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- 16 дек.
- 90 просмотров
1

ответ
HTML

Простой
Как картинку сделать кнопкой?
- 1 подписчик
- 15 дек.
- 121 просмотр
1

ответ
Показать ещё Загружается…

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Конвертировать файл в формате mkv в mp4

18 дек. 2024, в 20:01

1 руб./за проект

Веб сервис для печатной мастерской (php+laravel+mysql)

18 дек. 2024, в 19:48

100000 руб./за проект

Отладить код на JavaScript

18 дек. 2024, в 18:35

500 руб./в час

Answer 1 · 2018-10-25 20:21:02

а в чем собственно возникла сложность?

<html>
  <head>
    <style>
      html, body { padding: 0; }
      html, body, svg { margin: 0; width: 100%; height: 100%; }
    </style>
  </head>
  <body>
      <svg>
         ...
      </svg>
  </body>
</html>

Можно ли сделать свг на весь вьюпорт?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт