Как взаимодействуют между собой viewport и viewBox

Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад.
Рисует ли браузер то, что находится за областью видимости SVG холста?

Взаимодействие между собой viewport и viewBox довольно сложный вопрос, но это фундамен
для понимания и успешного использования SVG в вёрстке и анимации веб страничек. Я изучил много зарубежных интернет ресурсов на эту тему и конечно прежде всего спецификацию w3С, но я не носитель английского языка, да и изложено там, на мой взгляд несколько запутанно.
Ниже приведу на примерах, как я понял этот процесс взаимодействия viewport и viewBox.
viewport - это область видимости, часть бесконечного SVG холста, которую видит пользователь на дисплее своего гаджета.
Размеры viewport, допустим; - width="1000" height="600" задает автор файла SVG 
 началом координат  в левом верхнем углу.

viewBox - в качестве примера - viewBox="0 0 500 300" - это виртуальная, прямоугольна
область просмотра, которую пользователь не видит, но от которой зависит какая часть бесконечного полотна SVG будет показана на дисплее пользователя. Кроме того последние два атрибута viewBox отвечают за масштабирование изображения. Подробнее здесь.

Интересен сам процесс выборки с помощью viewBox фрагмента полотна SVG, последующего преобразования фрагмента и рендеринг его на дисплее пользователя. 
Ниже поясняющий рисунок.








viewBox можно разместить в любом месте SVG полотна. Его  положение зависит от первых двух атрибутов: min-x, min-y.

Далее идет захват фрагмента SVG полотна, расположенного под viewBoxом.

На следующем этапе система координат viewBox совмещается с началом системы координат viewport. И фрагмент захваченного  viewBoxом изображения передается обратно во viewport.
Идет процесс согласования и тут возможны варианты:


Если min-x = 0 и min-y = 0,  ширина и высота viewportа равны соответственно ширине и высоте viewBoxа, то изображение фрагмента не сдвигается и не масштабируется.
Если viewBox сдвинут вправо - min-x > 0 изображение сдвигается влево. Понятно, чт
захватив изображение правее viewport и потом совмещая с началом координат мы тем самым сдвигаем изображение влево.
Если viewBox сдвинут ниже viewporta -  min-y > 0 изображение поднимется вверх.


Масштабирование зависит от соотношения стророн viewporta и  viewBoxа 


При условии, что соотношение сторон viewport / viewBox > 1 - происходит пропорциональное увеличение масштаба исходного фрагмента SVG . 


Допустим окно viewBox в два раза меньше viewport. Поэтому при обратном совмещении  viewBox с viewport один пиксель из viewBox растягивается до 2-х пикселей viewport.


При viewport / viewBox < 1 - происходит уменьшение изображения. 

viewBox, который больше viewport захватывает весь viewport  и соседние с ним участки полотна SVG, а затем всё это уплотняет обратно во  viewport.

Повторяюсь, пользователь видит на дисплее изображение, которое после всех преобразований попало во viewport.
Можно вывести правило, которое легко запомнить:

У viewBox всё наоборот.

Поэтому, если вправо перемещаем viewBox - min-x > 0, то изображение сдвигается влево.

Если увеличиваем viewBox, то изображение уменьшается.

На основе этого приходят мысли, что можно реализовать горизонтальный и вертикальный параллакс, не используя CSS, JavaScript.
Для этого надо просто перемещать viewBox вдоль полотна SVG, как показано на рисунке ниже. Нажмите кнопку Start.

Верхнее окно это viewport, который видит пользователь, а цветная полоса - это полотно SVG.
Реализация горизонтального параллакса - здесь









Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.

    

Ответы

Ответ 1

Выше были примеры взаимодействия viewport и viewBox.

А что происходит, когда в SVG документе есть только viewport, а viewBox не прописан?

svg  version="1.1" width="1280" height="1024"
1. Масштабирования изображения не будет происходить при изменении размеров родительского контейнера или размеров окна браузера.

Команда - preserveAspectRatio тоже не будет работать. Кстати это единственный спосо
избавиться от неё, так как, если даже её не написать в шапке SVG файла, то по умолчанию она будет иметь значения  xMid yMid 


Второй вариант. В шапке SVG файла присутствует только viewBox


svg  version="1.1" viewBox = "0 0 640 516"
В этом случае viewport принимает значения по умолчанию - 100%  ширины и высоты окн
браузера. Масштабирование становится возможным. Масштаб изображения высчитывается из соотношения соответственно высоты окна браузера и viewBox. 
То есть при уменьшении viewBox мы увеличиваем изображение на дисплее, так как при этом не изменяем размер дисплея.
И наоборот,- уменьшая окно браузера мы уменьшаем размер изображения.

Команда - preserveAspectRatio становится активной. Ниже три примера, как она оказывает влияние на позиционирование изображения при изменении своих атрибутов.

preserveAspectRatio="xMinYMin meet"








preserveAspectRatio="xMidYMid meet"








preserveAspectRatio1="xMaxYMax meet"






Ответ 2

1. Пример использования viewport и viewBox для скрытия, показа изображения с одновременным масштабированием     


Из описания выше следует, что при соотношении параметров  viewport /
viewBox < 1 происходит уменьшение изображения относительно окна
браузера.


В примере:  300 / 2700 = 1/9