Una guia de disseny web per utilitzar la caixa de visualització 'SVG' (HTML)
Viewbox és un atribut comunament usat en crear formes SVG . Si penses en el document com a llenç, la caixa de visualització forma part del llenç que vols que vegi l'espectador. Tot i que la pàgina pot cobrir tota la pantalla de l'ordinador, la xifra només pot existir en un terç del total.
La caixa de visualització us permet indicar a l'analitzador que augmenti el nivell d'aquesta tercera. Elimina l'espai blanc addicional. Penseu en el quadre de vista com un enfocament virtual per retallar una imatge.
Sense ella, el vostre gràfic apareixerà un terç de la mida real.
Valors de la finestra de visualització
Per retallar una imatge, heu de crear punts a la imatge per fer les retallades. El mateix passa quan s'utilitza l'atribut de quadre de vista. La configuració del valor de la caixa de visualització inclou:
- minx: el principi x coordina
- miny, la coordenada inicial i
- ample d'amplada de la caixa de visualització
- alçada -potja de la bústia de vista
La sintaxi dels valors del quadre de vista és:
viewBox = "0 0 200 150"
No confongui l'amplada i l'alçada del quadre de vista amb l'amplada i l'alçada que heu definit per al document SVG . Quan creeu un fitxer SVG, un dels primers valors que estableixi és l'amplada i l'alçada del document. El document és un llenç. La caixa de vista pot cobrir tota la tela o només una part d'ella.
Aquest quadre de vista cobreix tota la pàgina.
Aquest quadre de vista cobreix la meitat de la pàgina que comença a la part superior dreta.
La vostra forma també té assignacions d'alçada i amplada.
Es tracta d'un document que cobreix 800 x 400 px amb una caixa de visualització que comença a la part superior dreta i que amplia la meitat de la pàgina. La forma és un rectangle que comença a la cantonada superior dreta de la caixa de visualització i moveu 100 px a l'esquerra i 50 px a baix.
Per què estableix una caixa de visualització?
SVG fa molt més que simplement dibuixar una forma. Es pot crear una figura sobre l'altra per obtenir un efecte d'ombra. Es pot transformar una forma perquè s'inclini en una sola direcció. Per als filtres avançats, haureu d'entendre i utilitzar l'atribut de quadre de vista.