Ръководство за уеб дизайн за използване на "SVG" Viewbox (HTML)
Viewbox е атрибут, който обикновено се използва при създаване на SVG форми. Ако мислите, че документът е платно, кутията за преглед е част от платното, което искате зрителят да види. Въпреки че страницата може да обхване целия екран на компютъра, цифрата може да съществува само в една трета от цялото.
Viewbox ви позволява да кажете на анализатора да увеличи тази трета. Това елиминира допълнително бяло пространство. Помислете за полето за преглед като виртуален подход за изрязване на изображение.
Без него графиката ви ще изглежда една трета от нейния действителен размер.
Стойности на Viewbox
За да изрежете изображение, трябва да създадете точки върху снимката, за да направите разфасовките. Същото важи и при използването на атрибута на полето за преглед. Настройките за стойности за viewbox включват:
- minx - началото x координата
- miny - началната y координата
- ширина-ширина на кутията за преглед
- височина-височина на кутията за преглед
Синтаксисът за стойностите в полето за преглед е:
viewBox = "0 0 200 150"
Не бъркайте ширината и височината на визуалната кутия с ширината и височината, които сте задали за документа SVG . Когато създавате SVG файл, една от първите стойности, които установите, е ширината и височината на документа. Документът е платно. Разгледателната кутия може да покрива цялото платно или само част от него.
Това поле за преглед обхваща цялата страница.
Тази кутия за изгледи обхваща половината от страницата, която започва в горния десен ъгъл.
Формата Ви също има задачи за височина и ширина.
Това е документ, който покрива 800 х 400 px с viewbox, който започва в горния десен ъгъл и разширява половината от страницата. Формата е правоъгълник, който започва в горния десен ъгъл на кутията за изгледи и премества 100 px наляво и 50 px надолу.
Защо да задавате Viewbox?
SVG прави много повече, отколкото просто да очертае форма. Тя може да създаде една фигура на върха на друга за сянка ефект. Тя може да трансформира форма, така че да се накланя в една посока. За разширените филтри ще трябва да разберете и използвате атрибута на полето за преглед.