Web-suunnitteluopas SVG-näkymän (HTML) käyttämiseen
Viewbox on attribuutti, jota käytetään yleisesti SVG- muotoja luotaessa. Jos ajattelet asiakirjaa kankaana, näkymä-ruutu on osa sitä kankaata, jonka haluat katsojan nähdä. Vaikka sivu voi kattaa koko tietokonenäytön, kuva voi olla vain kolmannes koko.
Viewbox -selaimella voit kertoa parserille, että voit zoomata kolmanneksesi. Se poistaa ylimääräisen valkoisen tilan. Ajattele näkymä-ruutua virtuaalisena lähestymistapana kuvan rajaamiseen.
Ilman sitä grafiikka näyttää kolmanneksen sen todellisesta koosta.
Viewbox-arvot
Kuvan rajaamiseksi sinun on luotava pistettä kuvaan leikkausten tekemiseksi. Sama pätee näkymäkenttäominaisuutta käytettäessä. Katseluikkunan arvoasetukset sisältävät:
- minx-alun x koordinaatti
- miny - alun y koordinaatti
- leveys-leveys katselukentässä
- näkymän korkeuden korkeus
Näkymäikkunoiden arvojen syntaksi on:
viewBox = "0 0 200 150"
Älä sekoita näyttöruudun leveyttä ja korkeutta SVG- asiakirjan asetellulla leveydellä ja korkeudella. Kun luot SVG-tiedoston, yksi ensimmäisistä määritetyistä arvoista on asiakirjan leveys ja korkeus. Asiakirja on kangas. Näkymälaatikko voi kattaa koko kankaan tai vain osan siitä.
Tämä näkymäruutu kattaa koko sivun.
Tämä ruutu kattaa puolen sivun oikeassa yläkulmassa alkavan sivun.
Muodostasi on myös korkeus- ja leveysmääritykset.
Se on asiakirja, joka kattaa 800 x 400 px, jossa näkymäikkuna alkaa oikeassa yläkulmassa ja laajentaa puolet sivusta. Muoto on suorakulmio, joka alkaa näkymäruudun oikeassa yläkulmassa ja siirtää 100 px vasemmalle ja 50 px alaspäin.
Miksi Määritä Viewbox?
SVG ei paljon muuta kuin piirtää muotoa. Se voi luoda yhden hahmon toisen päälle varjoefektin. Se voi muuntaa muodon niin, että se kallistuu yhteen suuntaan. Kehittyneitä suodattimia varten sinun on ymmärrettävä ja käytettävä näkymäruudun attribuutti.