Можете ли вы сделать отзывчивый viewbox? - PullRequest
Новая
       60

Можете ли вы сделать отзывчивый viewbox?

0 голосов
/ 30 апреля 2019

Если у вас слишком большое поле просмотра, страница будет прокручиваться. Есть ли способ сделать окно просмотра размером с любой браузер? Например, я сейчас нахожусь в браузере 1600 x 1900 с этим окном просмотра: 

<svg viewBox="-300 0 1920 995">

и прокрутка моей страницы. Первоначально я сделал веб-страницу на мониторе 1080p, и страница не прокручивалась.

1 Ответ

1 голос
/ 30 апреля 2019

У вас что-то не так.viewBox - это то, что вы используете, чтобы сделать SVG отзывчивым.Он говорит браузеру, как масштабировать содержимое вашего SVG, чтобы соответствовать родительскому.Атрибуты width и height определяют размер SVG.

Вам нужно ограничить размер SVG вашим окном.Тогда viewBox позволит вам изменить размер содержимого по размеру.

Например: 

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%
}
<svg width="100%" height="100%" viewBox="0 0 100 100">

  <circle cx="50" cy="50" r="50" fill="rebeccapurple"/>
  
</svg>

В этом примере.Я заставил <body> соответствовать размеру окна.Затем заставил SVG заполнить это.

Сделайте пример полноэкранным.Затем попробуйте увеличить и уменьшить окно.Сделайте это узким или широким.Круг автоматически изменит размер, чтобы он поместился в окне.

...