ventana gráfica y marco gráfico de SVG
¿Qué es un viewbox? Habrá muchas respuestas si miras el documento, pero creo que con entender un concepto básico es suficiente.
Viewbox es el sistema de coordenadas de nuestro dibujo final, lo que significa que cuando dibujamos algo en svg, la posición final se determina en función del sistema de coordenadas del viewbox.
¿Por qué es tan difícil entender viewbox?
En realidad, leí muchos artículos, pero no los entiendo en absoluto. Los libros sobre la naturaleza de SVG también son vagos y confusos.
Creo que se puede entender a partir de los siguientes puntos.
Definición del cuadro de vista
Cuando la relación de aspecto del cuadro de vista es la misma que la relación de aspecto de la ventana gráfica, las coordenadas del usuario se establecen primero y luego se dibujan.
La misma relación de aspecto significa que el ancho:alto establecido por el svg es igual al ancho:alto establecido por el viewbox.
Por ejemplo
La relación de aspecto del svg aquí es 400: 200 = 2.
La relación de aspecto establecida por el viewbox es 200:100 = 2.
Entonces la relación de aspecto aquí es la misma.
El rendimiento es el siguiente
Proceso de renderizado
El ancho y alto de la ventana gráfica svg son 800 y 600 respectivamente.
El ancho y alto establecidos del marco de visualización son 0, 0 800 600 respectivamente.
Las coordenadas del usuario aquí son 1:1, es decir, un píxel de las coordenadas del usuario corresponde a un píxel de la ventana gráfica.
Entonces el resultado es como se muestra en la figura
El rendimiento es el siguiente
Proceso de renderizado
El ancho y alto de la ventana gráfica de Los svg siguen siendo 800 y 600.
La relación de aspecto del cuadro de visualización pasa a ser 0 0 400 300.
El primer paso aquí es determinar las coordenadas del usuario, debido a que las coordenadas del usuario establecidas son 400 * 300, y las ventanas gráficas reales son 800 y 600, por lo que 1 píxel correspondiente a las coordenadas del usuario corresponde a los dos lados de la ventana gráfica.
Por lo tanto, al dibujar una imagen, cuando la ventana gráfica es 0 0 800 600, los píxeles físicos correspondientes a la ventana gráfica se ubican inicialmente en las coordenadas de usuario 100 y 100, pero cuando la ventana gráfica es 0 0 400 En 300, la coordenada del usuario es 65438.
Tenga en cuenta aquí que ya sea 100, 100 o 100, 100, las coordenadas de la imagen dibujada nunca han cambiado. Lo que cambia es la conversión de las coordenadas del usuario a la ventana gráfica svg.
El ancho y el alto del cuadro de visualización se presentaron arriba cuando la relación de aspecto es la misma que la ventana gráfica, ahora presentaremos cómo cambian X e Y del cuadro de visualización cuando la relación de aspecto es la misma. la ventana gráfica.
De hecho, el principio es el mismo, todavía está dividido en dos pasos.
a. Primero establezca las coordenadas del usuario, es decir, la relación de conversión entre las coordenadas del usuario y la ventana gráfica svg,
b Dibuje la imagen
. El rendimiento es el siguiente
Puedes ver que la imagen se ha movido 150 píxeles hacia la izquierda.
El principio sigue los dos pasos anteriores.
1. Primero configure las coordenadas del usuario, svg es 800: 600 y viewbox es 800: 600.
Entonces las coordenadas del usuario aquí son 1:1, y luego las coordenadas del usuario aquí se moverán 150 hacia la izquierda porque la x del viewBox está configurada, por lo que el dibujo original entre (0, 0) y ( 150) no se pueden mostrar 0) Coordenadas del usuario dentro del rango de coordenadas del usuario.
Cuando el ancho y el alto son diferentes, primero debe haber un estándar, es decir, en función de qué configurar la conversión de las coordenadas del usuario a la ventana gráfica, es decir, preservarAspectRatio.
Esto no es fácil de entender durante mucho tiempo, por lo que es mejor mirar las representaciones reales directamente.
/demos/interactive-SVG-coordinate-system/index html
Puedes configurarlo directamente aquí para ver el efecto.
Pero para captar la dirección general
Es establecer primero las coordenadas del usuario y luego dibujar.
Referencia:/2017/03/svg.html