Share
En este rápido consejo vamos a desglosar exactamente qué ventana gráfica y viewBox están en SVG. Aprenderás:
Accentsconagua
viewBox Vamos a empezar!
Si literalmente rompe la palabra "viewport" obtendrá una pista sobre su función en SVG; crea un "puerto" a través del cual puede "ver" una sección de un SVG. Puedes imaginarte esto como algo parecido a una ventana de ojo de buey a través de la cual puedes ver el mundo más allá.
La vista SVG es como una ventana de ojo de buey cuyo tamaño determina lo que puede ver a través de ella.Al igual que con una ventana, el tamaño de la ventana gráfica determina cuánto puede ver, pero no define el tamaño de lo que pueda verse a través de esa ventana. Lo que hay al otro lado podría ser teóricamente de cualquier tamaño..
Por ejemplo, puede tener una forma en su gráfico que es 100px por 100px, pero si configura la ventana gráfica a 50px por 50px Solo verás una porción de esa forma. El tamaño de la vista se establece agregando anchura y altura atributos a la svg elemento, como asi:
En la primera SVG vemos la totalidad. 100px por 100px circule, pero en el segundo SVG cuando configuramos el tamaño de la ventana gráfica 50px por 50px solo vemos un cuarto del circulo.
los viewBox puede pensarse como una ventana gráfica pero con dos características adicionales: puede "desplazarse" y puede hacer "zoom". Sobre la base de la analogía de "mirar a través del vidrio", si la ventana gráfica es como una ventana, el viewBox es como un telescopio.
El viewBox de SVG es muy similar al viewport, pero también puede desplazarse y hacer zoom como un telescopioControlamos el viewBox añadiéndolo como un atributo a la svg Elemento, con un valor que comprende cuatro números separados por espacios:
viewBox =
Los dos primeros números definen la posición del viewBox, que vamos a pensar como "paneo". Los dos últimos números definen las dimensiones de la viewBox, que vamos a considerar como "zoom".
Nota: así como el svg elemento, el viewBox atributo también se puede utilizar en los elementos símbolo, marcador, modelo y ver.
Comenzaremos observando el “zoom”, que podemos hacer con los dos últimos. viewBox parámetros: anchura y altura respectivamente. Dejaremos los dos primeros parámetros en 0 0 por ahora.
Si esos dos últimos parámetros tienen las mismas dimensiones que la ventana gráfica, no hay acercamiento ni alejamiento, por lo que no cambia nada. Echa un vistazo al número 3 de SVG, por ejemplo:
Pero si hacemos esos dos números más grandes que las dimensiones de la ventana gráfica, reduciremos el zoom de manera efectiva, y si los hacemos más pequeños, ampliaremos.
En el número 4 de SVG, en el ejemplo anterior, hemos establecido el viewBox anchura y altura a 100, que es el doble del tamaño de nuestra ventana. Este "se aleja" y muestra el doble del contenido, revelando así todo el círculo.
En la quinta SVG nuestra viewBox se establece en un anchura y altura de 25, que es la mitad del tamaño de nuestra ventana gráfica. Este "se acerca", mostrando la mitad de la cantidad de contenido.
Los primeros dos viewBox los parámetros le permiten "desplazarse" estableciendo donde se encuentra la esquina superior izquierda del viewBox debiera ser. El primer número controla la posición horizontal y el segundo controla la posición vertical.
Eche un vistazo a cómo funciona esta panorámica en este ejemplo. Para recordarte, SVG número 3 tiene una 50 por 50 vista, el viewBox Se agrega pero sin panoramización ni zoom. El número 6 es el mismo, pero panoramizado a la derecha y abajo:
Por supuesto, puede desplazar y hacer zoom al mismo tiempo, utilizando los cuatro parámetros a la vez, por ejemplo:
Cada vez que uses el viewBox atributo, recuerde configurar las dimensiones de la ventana gráfica también. Si no lo hace, tendrán un valor predeterminado del 100% y es probable que tenga un gráfico de gran tamaño:
Vamos a hervir todo en algunos puntos de bala:
viewBox es similar a la ventana gráfica, pero también puede usarlo para "panoramizar" y "hacer zoom" como un telescopio.anchura y altura parámetros en el svg elemento.viewBox al svg elemento. También se puede utilizar sobre los elementos. símbolo, marcador, modelo y ver.viewBox el valor del atributo se compone de cuatro parámetros separados por espacios.viewBox los parámetros controlan la "panorámica" y los dos últimos controlan el "zoom".viewBox Dimensiones, es decir, los dos últimos parámetros, más grandes que los de la ventana gráfica para "alejar" y más pequeños para "acercar".Espero que ayude a aclarar las aguas a veces turbias de SVG vista y viewBox. Feliz creando SVG!
