Opis atrybutu Viewbox w SVG

Viewbox jest atrybutem powszechnie używanym podczas tworzenia kształtów SVG. Jeśli myślisz o dokumencie jako o płótnie, to pole widoku jest częścią płótna, które widz ma widzieć. Mimo że strona może obejmować cały ekran komputera, liczba ta może istnieć tylko w jednej trzeciej całości.

Viewbox pozwala powiedzieć parserowi, aby powiększyć tę trzecią stronę. Eliminuje dodatkową białą przestrzeń. Pomyśl o polu widoku jako wirtualnym podejściu do przycinania obrazu. Bez niego Twoja grafika będzie wyglądać na trzecią część rzeczywistego rozmiaru.

Wartości w oknie Viewbox

Aby przyciąć obraz, musisz utworzyć punkty na obrazie, aby wykonać cięcia. To samo dotyczy atrybutu pola widoku. Ustawienia wartości dla viewbox obejmują:

• figlarka-Na początek współrzędnej x
• miny-Początkowa współrzędna y
• szerokość- szerokość widoku
• wysokość-Wysokość widoku

Składnia wartości pola widoku jest następująca:

viewBox = "0 0 200 150"

Nie należy mylić szerokości i wysokości okna widoku z ustawioną szerokością i wysokością dla dokumentu SVG. Podczas tworzenia pliku SVG jedną z pierwszych ustalonych wartości jest szerokość i wysokość dokumentu. Dokument jest płótnem. Pole widoku może obejmować całe płótno lub tylko jego część.

To pole widoku obejmuje całą stronę.

To pole widoku obejmuje połowę strony zaczynającej się w prawym górnym rogu.

Twój kształt ma również przypisania wysokości i szerokości.

Jest to dokument o rozdzielczości 800 x 400 pikseli z okienkiem, który zaczyna się w prawym górnym rogu i rozwija połowę strony. Kształt to prostokąt, który zaczyna się w prawym górnym rogu okna widoku i przesuwa 100 pikseli w lewo, a 50 pikseli w dół.

Dlaczego warto ustawić Viewbox?

SVG robi o wiele więcej niż tylko rysowanie kształtu. Może stworzyć jedną postać na drugiej, aby uzyskać efekt cienia. Może przekształcić kształt tak, aby przechylał się w jednym kierunku. W przypadku filtrów zaawansowanych musisz zrozumieć i użyć atrybutu pola widoku.