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

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

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

Значения Viewbox

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

  • шалунья

    — начальная координата х

  • Miny

    — начальная координата y

  • ширина

    — ширина окна просмотра

  • высота

    — высота окна просмотра

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

viewBox = «0 0 200 150»

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

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

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

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

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

Зачем устанавливать Viewbox?

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

Ссылка на основную публикацию