Configuración de la ventana gráfica SVG

Puede configurar la ventana gráfica SVG modificando los valores del atributo viewBox (que también se puede usar en algunos elementos SVG reutilizables). El atributo viewBox contiene cuatro números separados por espacios. Los dos primeros corresponden al centro de coordenadas, cuyo valor predeterminado es 0, y los dos últimos son width y height, que corresponden por defecto a la altura y anchura declaradas o predeterminadas del SVG. Si está presente, este atributo puede mover la ventana gráfica a una posición diferente y su escala.

Por ejemplo, si tiene un SVG con dimensiones de 400x300, la ventana gráfica predeterminada será 0 0, 400 300. Si declara un viewBox de 0 0 800 600, todos los objetos dentro del SVG se mostrarán a la mitad del tamaño, ya que un valor declarado de 100 ya no es 1/4 del ancho de la ventana gráfica, sino 1/8. También puede cambiar el origen de las coordenadas. Por ejemplo, puede moverlo al centro del SVG y posicionar elementos con coordenadas negativas si tiene un viewBox de -200 -150 400 300 (recuerde que las coordenadas comienzan en la esquina superior izquierda).

Considere el siguiente SVG:

<svg width="400" height="300" viewBox="...">
    <line x1="0" y1="-300" x2="0" y2="300" />
    <line y1="0" x1="-400" y2="0" x2="400" />
    <rect x="-130" y="-130" height="20" width="200" fill="red" />
    <rect x="130" y="-130" height="200" width="20" fill="blue" />
    <react x="0" y="100" height="20" width="200" fill="green" />
    <rect x="-130" y="-65" height="200" width="20" fill="orange" />
</svg>

Las imágenes a continuación muestran lo que aparecería en la pantalla, según los valores que se incluyan para el atributo viewBox. El primero es el predeterminado.

El siguiente es con atributos modficados.

Es posible que rara vez uses viewBox con D3, ya que puedes lograr los mismos resultados usando transformaciones matriciales que son más simples.