Svg viewbox что это
ViewBox
При рисовании фигуры мы не ограничены пространством. Считайте, что у нас есть бесконечный холст и мы можем нарисовать круг в любом месте. Но наш монитор имеет ограниченный размер, поэтому фигура должна «попасть» в видимый прямоугольник. Считайте viewBox (регистр важен) таким ограничивающим прямоугольником. Например, зададим ограничивающую область 200 на 100 единиц с началом координат (0, 0), которая находится в верхней левой точке. Единицы измерения и начало координат являются условными понятиями, чтобы было от чего отталкиваться.
Для демонстрации примера нарисуем круг в некоторой позиции. Для удобства изменим фон области.
Для экономии места в примере не используются пространства имён, браузер Chrome справляется с этим.
Мы задали фигуру Круг с радиусом 50 единиц, но не указали координаты. В результате центр круга разместился в точке (0, 0), а мы увидели только часть круга в области viewBox, хотя где-то в памяти компьютера был нарисован честный круг.
Если мы уменьшим размер viewBox в два раза с 200х100 на 100х50, то увидим, что круг увелится.
Общий размер контейнера останется прежним, так как мы задали размеры в процентах у CSS. Тут главное понять, что viewBox работает в своём измерении. Не изменяя размеры круга, мы увидели, что круг увеличился. По сути, viewBox работает как масштабирование объекта.
Части фигуры, которые выходят за пределы viewBox, обрезаются и мы их не видим.
Впрочем мы может задать координаты кругу. Попробуем.
Если приглядеться, то в правом нижнем углу можно увидеть фрагмент красного круга. Очевидно, что мы не слишком удачно выбрали координаты. Исправимся. Заодно увеличим масштаб.
Уже лучше. Похоже на восход или закат солнца.
Напомню ещё раз, что в действительно круг рисуется полностью и вы можете использовать его в анимациях, чтобы увидеть его полный размер. Более того, можно показать и этот круг видимым, через CSS, используя overflow:visible.
Также можно использовать отрицательные значения. Допустим, есть такой вариант со стандартной точкой отсчёта (0, 0).
Не будем менять координаты круга, а изменим координаты у viewBox.
При этом нужно помнить, что сама точка отсчёта у SVG не меняется и круг без указания координат будет рисоваться в точке (0, 0).
Как понять атрибут Viewbox в SVG
Руководство по веб-дизайну с использованием SVG Viewbox (HTML)
Окно просмотра – это атрибут, обычно используемый при создании форм SVG. Если вы рассматриваете документ как холст, поле просмотра является частью холста, который вы хотите, чтобы зритель увидел. Даже если страница может охватывать весь экран компьютера, эта цифра может существовать только в трети целого.
Viewbox позволяет вам сказать парсеру увеличить эту третью. Это устраняет лишние пробелы. Воспринимайте viewbox как виртуальный подход к кадрированию изображения. Без этого ваш график будет отображать треть его фактического размера.
Значения Viewbox
Чтобы обрезать изображение, вы должны создать точки на картинке, чтобы сделать разрезы. То же самое верно при использовании атрибута поля просмотра. Настройки значения для viewbox включают в себя:
– начальная координата x
– начальная координата y
– ширина окна просмотра
– высота окна просмотра
Синтаксис для значений окна просмотра:
viewBox = “0 0 200 150”
Не путайте ширину и высоту окна просмотра с шириной и высотой, которые вы установили для документа SVG. Когда вы создаете файл SVG, одним из первых значений, которые вы устанавливаете, является ширина и высота документа. Документ представляет собой холст. Окно просмотра может охватывать весь холст или только его часть.
Это окно просмотра охватывает всю страницу.
Это окно просмотра охватывает половину страницы, начиная с правого верхнего угла.
Ваша фигура также имеет назначения высоты и ширины.
Это документ размером 800 x 400 пикселей с окном просмотра, которое начинается в верхнем правом углу и расширяет половину страницы. Форма представляет собой прямоугольник, который начинается в верхнем правом углу поля просмотра и перемещается на 100 пикселей влево и на 50 пикселей вниз.
Зачем устанавливать Viewbox?
SVG делает гораздо больше, чем просто рисует фигуру. SVG можно использовать в веб-дизайне. Он может создать одну фигуру поверх другой для эффекта тени. Он может трансформировать фигуру так, что она наклоняется в одном направлении. Для расширенных фильтров вам необходимо понять и использовать атрибут viewbox.
Как взаимодействуют между собой viewport и viewBox
Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста?
Интересен сам процесс выборки с помощью viewBox фрагмента полотна SVG, последующего преобразования фрагмента и рендеринг его на дисплее пользователя. Ниже поясняющий рисунок.
viewBox можно разместить в любом месте SVG полотна. Его положение зависит от первых двух атрибутов: min-x, min-y.
На следующем этапе система координат viewBox совмещается с началом системы координат viewport. И фрагмент захваченного viewBox ом изображения передается обратно во viewport. Идет процесс согласования и тут возможны варианты:
Масштабирование зависит от соотношения стророн viewport a и viewBox а
Допустим окно viewBox в два раза меньше viewport. Поэтому при обратном совмещении viewBox с viewport один пиксель из viewBox растягивается до 2-х пикселей viewport.
При viewport / viewBox 0, то изображение сдвигается влево.
Если увеличиваем viewBox, то изображение уменьшается.
На основе этого приходят мысли, что можно реализовать горизонтальный и вертикальный параллакс, не используя CSS, JavaScript. Для этого надо просто перемещать viewBox вдоль полотна SVG, как показано на рисунке ниже. Нажмите кнопку Start.
Практический пример взаимодействия viewport и viewBox в переведенной статье с enSO на нашем сайте.
Описание и примеры стандартных функций SVG
Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax
Трансформация изображений SVG при изменении параметров Viewbox
Введение
Изменение параметров viewBox – атрибута элемента SVG позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат. Но довольно часто возникают вопросы: “Почему, изменив параметры viewBox, я получаю совсем не то, что ожидал увидеть?”. Вместо увеличения картинки в 2 раза, она совсем пропадает с дисплея или сдвигается не в ту сторону и т.д. Чтобы разобраться в причинах этих “аномалий” рассмотрим подробно процессы взаимодействия областей просмотра элемента SVG и его параметра viewBox.
2. SVG viewport
В фрагменте кода (см. Лист.1) третья строка определяет прямоугольную область просмотра – SVG viewport и систему координат viewport coordinate system с началом координат (0,0) в левом верхнем углу, положительным направлением оси абцисс “X” – вправо и положительным направлением оси ординат “Y” – вниз. В нашем примере ширина прямоугольной области просмотра – width=”400px” и высота – height=”400px”. По умолчанию ед. измерения в пикселях и поэтому “px” можно не указывать. Также могут применяться и другие единицы измерения, например дюймы: (см. Лист.2)
3. SVG viewBox
4. Процесс взаимодействия viewport и viewBox
Холст SVG документа имеет бесконечные размеры.
Viewport и viewBox – это две прямоугольные области просмотра, которые ограничены конечными значениями высоты и ширины, указанными в параметрах viewport и viewBox. При изменении параметров viewport и viewBox появляется возможность отобразить без искажений или трансформировать любой конкретный фрагмент холста SVG.
Далее в тексте и на рисунках для обозначения ширины и высоты приняты следующие сокращения:
Рассмотрим пример, когда параметры этих областей просмотра совпадают. Всё, что находится вне области, ограниченной осями “ SVG width ” и “ SVG height ” не отображается.
Например: большая часть прямоугольника “5” красного цвета см. Лист.4 и Рис.1
Лист.4
не попадает в область просмотра, так как он имеет начало координат по оси Х=390px, ширина его 100px, поэтому от прямоугольника остается в видимой области по ширине только: 400px-390px= 10px. Остальные 90px вне области видимости.
Вторая область – viewBox служит для трансформации векторной графики полученной от SVG viewport – первой области просмотра.
В процессе согласования – “by a negotiation process” сравниваются параметры двух областей просмотра: SVG viewport и viewBox. Если они полностью совпадают, как в нашем примере, то графика от viewBox без изменений передается обратно в первую область просмотра viewport см. Рис.1
Прерывистый голубой контур и квадратики показывают границы и область просмотра SVG viewport.
4а. Смещение начала координат viewBox по одной оси
Изменяя параметры viewBox: min-x, min-y, можно сместить начало пользовательских координат относительно начала координат SVG viewport.
viewBox=”70px, 0, 400px, 400px” см. Рис.2
На Рис.2 начало пользовательских координат сдвигается вправо на 70px, тем самым сдвигая вправо по оси абцисс всю прямоугольную область просмотра viewBox (400 x 400px). При этом происходит захват изображения фрагмента документа SVG, который находится под viewBox, а далее область просмотра viewBox, с захваченным фрагментом, обратно совмещается с неподвижной областью просмотра viewport с началом координат (0,0) в левом верхнем углу. Координаты фигур пересчитываются с учетом последнего сдвига на 70px влево. Формально получается, что в неподвижной области просмотра viewport, при применении viewBox, фрагмент документа SVG сдвинулся влево.
Поэтому в нашем примере на ширине 70px появляется, скрытая ранее, большая часть красного прямоугльника – 5, а зелёный и жёлтый круг обрезаются слева по ширине на 70px. см. Рис.3
Посмотреть, как это происходит можно на демо.
View demo
4б. Смещение начала координат viewBox по двум осям
Теперь переместим начало координат по двум осям сразу в точку (70,70):
viewBox=”70px, 70px, 400px, 400px”. Для наглядности добавим внизу еще один красный прямоугольник – (6). см.Рис.4
После переноса начала координат в область видимости viewBox попадает прямоугольный (400×400)px фрагмент SVG документа с отсчетом ширины и высоты от начала координат (70,70). Происходит захват изображения. Далее начало координат viewBox (70,70) совмещается с началом координат viewport (0,0). Координаты фигур пересчитываются.
Поэтому становятся полностью видны красные прямоугольники 5 и 6. Всё, что не попадает в эту область, отсекается. Например, часть площадей цветных окружностей 1,2 и 4.
Другими словами, перемещая начало координат viewBox вправо и вниз на 70px, в итоге получаем перемещение фрагмента документа SVG в области просмотра viewport влево и вверх.
View demo
5. Изменение масштаба с помощью viewBox
За масштаб фрагмента документа SVG отвечает пропорциональное соотношение ширин и высот соответственно двух областей просмотра: viewport и viewBox. Если соотношение сторон равны 1, то конечное изображение будет передано в масштабе 1:1, то есть без трансформации.
Если соотношение сторон будет отличаться от единицы, то масштаб будет меняться в сторону увеличения или уменьшения.
Карманное руководство по написанию SVG. Глава 3
Глава 3. Рабочая область
Пожалуй, самым важным аспектом SVG, после понимания его главной структуры и умения создавать основные фигуры, является получение представления об используемой рабочей области, или другими словами, системы координат, в которой будет отображаться графика.
У этой груши, к счастью, область просмотра и viewBox совпадают:
Вся груша видна в браузере и будет масштабироваться соответственно при изменении размеров области просмотра.
Область просмотра
Область просмотра является видимой частью SVG. Хотя SVG может быть какой угодно ширины или высоты, ограничение области просмотра будет означать, что в любой момент времени может быть видна только часть изображения.
Если эти значения не заданы, размеры рабочей области обычно будут определены по другим показателям в SVG, например, по ширине самого внешнего элемента SVG. Однако, без указания этих значений есть риск, что графический объект обрежется.
viewBox
Значения min определяют, в какой точке внутри изображения должен начинаться viewBox, в то время как width и height устанавливают размер блока.
preserveAspectRatio
Если пропорции ширины и высоты области просмотра и viewBox не совпадают, то артибут preserveAspectRatio указывает браузеру, как отображать рисунок.
У атрибута может быть одно из трех значений: meet (по умолчанию), slice, и none. В то время как meet гарантирует полную видимость графики (насколько это возможно), slice старается заполнить область просмотра с viewBox и затем обрезать все части изображения, которые не поместились в область просмотра после этого масштабирования. none не сохраняет пропорции и скорее всего исказит изображение.
Возможно самое незамысловатое значение здесь – это «none», которое показывает, что масштабирование не должно быть равномерным. Если мы увеличим пиксельные значения области просмотра на следующем изображении вишенок, то оно будет неравномерно растянуто и выглядеть искажённым.
preserveAspectRatio для изображения ниже установлен в xMinYMax meet и выравнивает нижний левый угол viewBox по нижнему левому углу области просмотра (которая теперь обведена). meet гарантирует, что изображение отмасштабируется таким образом, чтобы вместиться в область просмотра насколько это возможно.
Здесь те же самые вишенки, но meet изменён на slice :
Заметьте, что значения выравнивания не зависят друг от друга.
В примере выше значения preserveAspectRatio установлены в xMinYMid slice ; теперь вишенки выравнены по середине оси y области просмотра.
Преобразования системы координат
SVG включает дополнительные возможности изменения графики, такие как вращение, масштабирование, перемещение и наклон при помощи трансформации. SVG-автор может добавить трансформации к определённым элементом или к целой группе элементов.
При трансформации SVG важно учитывать то, что она влияет на вашу систему координат, т.е. на рабочую область. Это происходит потому, что трансформация создаёт новую действующую систему координат SVG-элемента, фактически копируя оригинал, а затем накладывая трансформацию на новую систему координат.
Следующая картинка показывает трансформацию системы координат, происходящую при наложении сдвига на (100,100) на группу с графикой:
Сама система координат переместилась, а изображение лайма и лимона сохранило своё исходное местоположение в системе. Новая действующая система координат начинается в точке (100,100) в исходной системе координат.
В случае вложенных трансформаций эффекты накапливаются, поэтому окончательная трансформация на дочернем элементе будет основываться на суммарном эффекте трансформаций его предков.
translate
Значение y является необязательным, и если оно опущено, то предполагается, что оно равно «0».
rotate
scale
Значение масштаба «.5» отобразит графику вполовину от ее исходного размера, тогда как значение «3» увеличит исходный размер втрое. Значение «4,2» отмасштабирует графику вчетверо по ширине и вдвое по высоте относительно исходных размеров.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!