Sut i ddeall Nodwedd y Viewbox yn SVG

Canllaw Dylunio Gwe i Ddefnyddio 'SVG' Viewbox (HTML)

Priodwedd yw Viewbox sy'n cael ei ddefnyddio'n gyffredin wrth greu siapiau SVG . Os ydych chi'n meddwl am y ddogfen fel cynfas, mae'r blwch gweld yn rhan o'r gynfas yr ydych am i'r gwyliwr ei weld. Er y gall y dudalen gynnwys y sgrin gyfrifiadur cyfan, dim ond mewn traean o'r cyfan y gall y ffigwr fodoli.

Mae Viewbox yn caniatáu ichi ddweud wrth y parser i ymglymu ar y trydydd hwnnw. Mae'n dileu'r lle gwyn ychwanegol. Meddyliwch am y blwch barn fel agwedd rithwir at ddelwedd cnwd.

Hebddo, bydd eich graffig yn ymddangos yn draean o'i faint gwirioneddol.

Gwerthoedd Viewbox

Er mwyn cnoi delwedd, rhaid i chi greu pwyntiau ar y llun i wneud y toriadau. Mae'r un peth yn wir wrth ddefnyddio priodoldeb y blwch barn. Mae'r gosodiadau gwerth ar gyfer blwch view yn cynnwys:

Y gwerthoedd cystrawen ar gyfer y blwch gweld yw:

viewBox = "0 0 200 150"

Peidiwch â drysu lled ac uchder y bocs golygfa gyda'r lled a'r uchder a osodwch ar gyfer y ddogfen SVG . Pan fyddwch yn creu ffeil SVG, un o'r gwerthoedd cyntaf a sefydlwch yw lled a uchder y ddogfen. Mae'r ddogfen yn gynfas. Gall y bocs golwg gynnwys y gynfas cyfan neu dim ond rhan ohoni.

Mae'r blwch hwn yn cynnwys y dudalen gyfan.

Mae'r bocs golygfa hon yn cynnwys hanner y dudalen sy'n dechrau yn y gornel dde ar y dde.

Mae gan eich siâp hefyd aseiniadau uchder a lled.


Mae'n ddogfen sy'n cynnwys 800 x 400 px gyda blwch golygfa sy'n cychwyn yn y gornel dde ar y dde ac yn ehangu hanner y dudalen. Mae'r siâp yn petryal sy'n dechrau yng nghornel uchaf dde'r bocs golygfa ac yn symud 100 px i'r chwith a 50 px i lawr.

Pam Gosodwch Viewbox?

Mae SVG yn gwneud llawer mwy na dim ond tynnu siâp. Gall greu un ffigwr ar ben un arall am effaith cysgodol. Gall drawsnewid siâp fel ei fod yn troi'n un cyfeiriad. Ar gyfer y hidlwyr datblygedig, bydd angen i chi ddeall a defnyddio priodoldeb y blwch barn.