Skip to main content

Entendiendo el atributo Viewbox en SVG

Patrones y sucesiones (Abril 2025)

Patrones y sucesiones (Abril 2025)
Anonim

Viewbox es un atributo comúnmente utilizado al crear formas SVG. Si piensa que el documento es un lienzo, el cuadro de vista es parte del lienzo que desea que el espectador vea. A pesar de que la página puede cubrir toda la pantalla de la computadora, la figura solo puede existir en un tercio del total.

Viewbox le permite decirle al analizador que haga zoom en ese tercero. Se elimina el espacio en blanco extra. Piense en el cuadro de vista como un enfoque virtual para recortar una imagen. Sin él, su gráfico aparecerá un tercio de su tamaño real.

Valores de Viewbox

Para recortar una imagen, debe crear puntos en la imagen para hacer los cortes. Lo mismo es cierto cuando se utiliza el atributo de cuadro de vista. Los valores de configuración para viewbox incluyen:

  • marta-La coordenada de comienzo x
  • miny-El comienzo y la coordenada
  • anchura-Width of the viewbox
  • altura-La altura del cuadro de vista

La sintaxis para ver los valores del cuadro es:

viewBox = "0 0 200 150"

No confunda el ancho y el alto del cuadro de vista con el ancho y el alto que estableció para el documento SVG. Cuando crea un archivo SVG, uno de los primeros valores que establece es el ancho y la altura del documento. El documento es un lienzo. El cuadro de vista puede cubrir todo el lienzo o solo una parte de él.

Este cuadro de vista cubre toda la página.

Este cuadro de vista cubre la mitad de la página que comienza en la esquina superior derecha.

Tu forma también tiene asignaciones de altura y anchura.

Es un documento que cubre 800 x 400 px con un cuadro de vista que comienza en la esquina superior derecha y expande la mitad de la página. La forma es un rectángulo que comienza en la esquina superior derecha del cuadro de vista y se mueve 100 px a la izquierda y 50 px hacia abajo.

¿Por qué configurar un Viewbox?

SVG hace mucho más que simplemente dibujar una forma. Puede crear una figura encima de otra para un efecto de sombra. Puede transformar una forma para que se incline en una dirección. Para los filtros avanzados, deberá comprender y utilizar el atributo del cuadro de vista.