Како да го разберете атрибутот Viewbox во SVG

Упатство за веб дизајн за користење на "SVG" приказот за слики (HTML)

Viewbox е атрибут кој најчесто се користи при креирање SVG форми. Ако мислите за документот како платно, полето за поглед е дел од платно кое сакате гледачот да го види. Иако страницата може да го покрие целиот компјутерски екран, бројката може да постои само во една третина од целата.

Viewbox ви овозможува да му кажете на парсерот да зумира на таа третина. Го елиминира дополнителниот бел простор. Размислете за полето за гледање како виртуелен пристап за да исечете слика.

Без него, вашата графика ќе се појави една третина од нејзината вистинска големина.

Вредности на Преглед

За да исечете слика, мора да креирате точки на сликата за да ги направите парчињата. Истото важи и при користење на атрибутот на полето за приказ. Подесувања за вредност за приказот вклучуваат:

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

viewBox = "0 0 200 150"

Не мешајте ја ширината и висината на кутијата со ширина и висина што ги поставивте за документот SVG . Кога креирате SVG-датотека, една од првите вредности што ги одредувате е ширината на документот и висината. Документот е платно. Погледот кутија може да ги покрие целиот платно или само дел од неа.

Оваа опција ја покрива целата страница.

Оваа рамка за преглед покрива половина од страницата која започнува во горниот десен агол.

Вашиот облик, исто така, има задачи за висина и ширина.


Тоа е документ кој покрива 800 х 400 пиксели со поле за приказ кое започнува во горниот десен агол и се проширува половина од страната. Обликот е правоаголник кој започнува во горниот десен агол од полето за приказ и се движи од 100 px налево и 50 px надолу.

Зошто поставите кутија за приказ?

SVG прави многу повеќе отколку само нацрта форма. Тоа може да создаде една фигура на врвот на друга за ефект на сенка. Таа може да трансформира облик, така што се навалува во една насока. За напредните филтри, ќе треба да го разберете и да го користите атрибутот кутија за приказ.