Понимание атрибута Viewbox в SVG

Viewbox - это атрибут, обычно используемый при создании форм SVG. Если вы рассматриваете документ как холст, поле просмотра является частью холста, который вы хотите видеть зрителем. Несмотря на то, что страница может охватывать весь экран компьютера, эта цифра может существовать только в одной трети целого.

В окне «Просмотр» вы можете рассказать синтаксическому анализатору об увеличении этой третьей части. Это устраняет лишнее пространство. Подумайте о поле зрения как виртуальном подходе к обрезке изображения. Без него ваша графика будет отображаться на треть от ее фактического размера.

Значения

Чтобы обрезать изображение, вы должны создать точки на изображении, чтобы сделать разрезы. То же самое верно при использовании атрибута box окна. Настройки значения для окна просмотра включают:

шалунья-Начальная координата x
Miny-Начальная координата y
ширинаШирины окна просмотра
рост- высота окна просмотра

Синтаксис для значений окна представления:

viewBox = "0 0 200 150"

Не путайте ширину и высоту окна просмотра с шириной и высотой, установленной для документа SVG. Когда вы создаете файл SVG, одно из первых значений, которое вы устанавливаете, это ширина и высота документа. Документ представляет собой холст. Поле просмотра может охватывать весь холст или только часть его.

Это окно просмотра охватывает всю страницу.

В этом окне просмотра отображается половина страницы, начиная с верхнего правого угла.

Ваша форма также имеет назначения высоты и ширины.

Это документ, который охватывает 800 x 400 px с окном просмотра, который начинается в правом верхнем углу и расширяет половину страницы. Форма представляет собой прямоугольник, который начинается в правом верхнем углу окна просмотра и перемещается на 100 пикселей влево и на 50 пикселей вниз.

Зачем устанавливать ящик?

SVG делает гораздо больше, чем просто нарисовать фигуру. Он может создать одну фигуру поверх другой для эффекта тени. Он может трансформировать фигуру так, чтобы она наклонялась в одном направлении. Для расширенных фильтров вам нужно будет понять и использовать атрибут box окна.