Kiel Kompreni la Viewbox-Atribuon en SVG

Gvidilo de dezajno retejo por uzi 'SVG' Viewbox (HTML)

Viewbox estas atributo komune uzata kreinte SVG- formojn. Se vi pensas pri la dokumento kiel tolo, la vido-skatolo estas parto de la tolo, kiun vi volas vidi la spektanton. Kvankam la paĝo eble kovras la tutan komputilon, la figuro povas nur ekzisti en triono de la tuta.

Viewbox permesas al vi diri la analizilon por zomi en tiu tria. Ĝi forigas la ekstra blankan spacon. Pensu pri vido-skatolo kiel virtuala aliro por kultivi bildon.

Sen tio, via grafikaĵo aperos triono de ĝia reala grandeco.

Rigardaj Valoroj

Por krei bildon, vi devas krei punktojn sur la bildo por fari la kortegon. La sama estas vera kiam uzanta la vidpunkto-atributo. La valoraj agordoj por viewbox inkluzivas:

La sintakso por vidaj skatoloj estas:

viewBox = "0 0 200 150"

Ne konfuzas la larĝan kaj altecon de la vida skatolo kun la larĝa kaj alteco, kiun vi difinis por la SVG- dokumento. Kiam vi kreas SVG-dosieron, unu el la unuaj valoroj, kiujn vi establas, estas la larĝa kaj alteco de la dokumento. La dokumento estas tolo. La vida skatolo povas kovri la tutan tolon aŭ nur parton de ĝi.

Ĉi tiu vida skatolo kovras la tutan paĝon.

Ĉi tiu vida skatolo kovras duonon de la paĝo ekde la supra dekstra angulo.

Via formo ankaŭ havas altecon kaj larĝajn taskojn.


Ĝi estas dokumento kiu kovras 800 x 400 px per viewbox kiu komenciĝas en la supra dekstra angulo kaj vastigas duonon de la paĝo. La formo estas rektangulo, kiu komencas en la supra dekstra angulo de la vidpunkto kaj movas 100 px maldekstre kaj 50 px malsupren.

Kial Ŝanĝi Viewbox?

SVG faras multe pli ol simple desegni formon. Ĝi povas krei unu figuron supre de alia por ombra efiko. Ĝi povas transformi formon por ke ĝi falu en unu direkto. Por la antaŭitaj filtriloj, vi devos kompreni kaj uzi la vidpunkton-atributon.