Unha guía de deseño web para usar o cadro de visualización 'SVG' (HTML)
Viewbox é un atributo que se usa habitualmente cando se crean formas SVG . Se pensas no documento como un lienzo, a caixa de visualización forma parte do lenzo que quere ver o espectador. Aínda que a páxina pode abarcar toda a pantalla do ordenador, a cifra só pode existir nun terzo da totalidade.
Viewbox permítelle dicir ao analizador que se achegue a ese terceiro. Elimina o espazo branco extra. Pense na caixa de visualización como un enfoque virtual para recortar unha imaxe.
Sen el, o teu gráfico aparecerá un terzo do seu tamaño real.
Valores da caixa de verificación
Para cortar unha imaxe, debes crear puntos na imaxe para facer os cortes. O mesmo é certo cando se usa o atributo da caixa de visualización. A configuración de valores para a caixa de visualización inclúe:
- minx-o principio x coordinar
- miny - a coordenada de inicio y
- ancho do ancho da caixa de visualización
- alto-alto da caixa de visualización
A sintaxe para ver os valores da caixa é:
viewBox = "0 0 200 150"
Non confunda o ancho e a altura da caixa de visualización co ancho e altura que estableceu para o documento SVG . Cando cree un ficheiro SVG, un dos primeiros valores que establece é o ancho eo alto do documento. O documento é un lienzo. A caixa de visión pode cubrir toda a lona ou só unha porción dela.
Esta caixa de visualización cobre toda a páxina.
Esta caixa de visualización cobre a metade da páxina que comeza na esquina superior dereita.
A súa forma tamén ten atributos de altura e ancho.
É un documento que abrangue 800 x 400 px cunha caixa de visualización que comeza na esquina superior dereita e expande a metade da páxina. A forma é un rectángulo que comeza na esquina superior dereita da caixa de visualización e move 100 px cara á esquerda e 50 px cara abaixo.
Por que definir unha caixa de verificación?
O SVG fai moito máis que simplemente debuxar unha forma. Pode crear unha figura sobre outra para un efecto sombra. Pode transformar unha forma para que se inclúa nunha dirección. Para os filtros avanzados, necesitará entender e usar o atributo da caixa de visualización.