Как взаимодействуют между собой viewport и viewBox
1,00
р.
Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости 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 8 8 (0,0) viewport
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. Реализация горизонтального параллакса - здесь
<?xml version="1.0" encoding="UTF-8" standalone="no"?> Explanation horizontal of parallax viewBox animate the horizontal parallax svg-art.ru by modifying a coordinate of the viewBox 1 0 2 1168 3 2336 4 3504 5 4672 1 0 The SVG canvas is infinite in size. In our example, user a viewport of SVG is in the leftmost position. viewBox is moved along canvas SVG viewBox The image moves to the left viewport Grey background image of the canvas SVG viewport display the user's canvas SVG Start Stop
Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.
Ответ
Выше были примеры взаимодействия 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"
Взаимодействие между собой 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 8 8 (0,0) viewport
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. Реализация горизонтального параллакса - здесь
<?xml version="1.0" encoding="UTF-8" standalone="no"?> Explanation horizontal of parallax viewBox animate the horizontal parallax svg-art.ru by modifying a coordinate of the viewBox 1 0 2 1168 3 2336 4 3504 5 4672 1 0 The SVG canvas is infinite in size. In our example, user a viewport of SVG is in the leftmost position. viewBox is moved along canvas SVG viewBox The image moves to the left viewport Grey background image of the canvas SVG viewport display the user's canvas SVG Start Stop
Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.
Ответ
Выше были примеры взаимодействия 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"
