SVG 2D Introducción de HTML5 6 - Descripción general del sistema de coordenadas de Windows y el sistema de coordenadas de usuario y la transformación

Autor：Eve Cole Fecha de actualización：2025-04-06 02:00:03

Sistema de coordenadas

Hay dos sistemas de coordenadas en SVG: el sistema de coordenadas de ventana y el sistema de coordenadas del usuario. Por defecto, los puntos del sistema de coordenadas del usuario y el sistema de coordenadas de la ventana corresponden uno por uno, los cuales son el origen en la esquina superior izquierda de la ventana, el eje X es horizontalmente a la derecha y el eje y está verticalmente hacia abajo; Como se muestra en la figura a continuación:

La posición de la ventana del SVG generalmente se especifica por CSS, y el tamaño se establece mediante el ancho y la altura del atributo del elemento SVG. Sin embargo, si el SVG se almacena en un objeto integrado (como un elemento de objeto u otro elemento SVG), y el documento que contiene el SVG está formateado con CSS o XSL, y el CSS u otros valores de tamaño especificados de estos objetos periféricos ya puede calcular el tamaño de la ventana, luego se utilizará el tamaño del objeto periférico.

Aquí necesitamos distinguir los conceptos de ventanas, sistemas de coordenadas de ventanas y sistemas de coordenadas de usuario:

Ventana : se refiere al área rectangular visible en la página web, con longitud y ancho limitados, y esta área generalmente está relacionada con el tamaño del objeto periférico.

Sistema de coordenadas de ventana : esencialmente un sistema de coordenadas con origen, eje x y eje y; y se extiende infinitamente en ambas direcciones. Por defecto, el origen se encuentra en la esquina superior izquierda de la ventana, el eje X está horizontalmente a la derecha y el eje y está verticalmente hacia abajo. Los puntos en este sistema de coordenadas pueden transformarse.

Sistema de coordenadas de usuario : esencialmente un sistema de coordenadas con origen, eje x y eje y; y se extiende infinitamente en ambas direcciones. Por defecto, el origen se encuentra en la esquina superior izquierda de la ventana, el eje X está horizontalmente a la derecha y el eje y está verticalmente hacia abajo. Los puntos en este sistema de coordenadas pueden transformarse.

Por defecto, el sistema de coordenadas de la ventana y el sistema de coordenadas del usuario se superponen, pero debe tenerse en cuenta aquí que el sistema de coordenadas de ventana pertenece al elemento que crea la ventana. Después de determinar el sistema de coordenadas de la ventana, se determinará el tono de coordenada de toda la ventana. Sin embargo, el sistema de coordenadas del usuario pertenece a cada elemento gráfico. Mientras el gráfico tenga una transformación de coordenadas, se creará un nuevo sistema de coordenadas de usuario. Todas las coordenadas y dimensiones en este elemento usan este nuevo sistema de coordenadas de usuario.

En pocas palabras: el sistema de coordenadas de ventana describe el perfil de coordenadas inicial de todos los elementos en la ventana, y el sistema de coordenadas del usuario describe el perfil de coordenadas de cada elemento. De manera predeterminada, todos los elementos usan el sistema de coordenamiento de usuario predeterminado que coincide con el sistema de coordenadas de ventana.

Coordinar la transformación del espacio

Revisemos la transformación de las coordenadas de los usuarios de lienzo, que se implementan a través de funciones de traducción, escala y rotación; Cada transformación funcionará en las figuras dibujadas más adelante, a menos que la transformación se realice nuevamente, que es el concepto del sistema de coordenadas de usuario actual. El lienzo tiene solo un sistema de coordenadas de usuario.

En SVG, la situación es completamente diferente. Como elemento gráfico vectorial, SVG en sí puede considerarse esencialmente como sistemas de coordenadas de usuario; Ambos espacios coordinados de SVG pueden transformarse: transformación del espacio de ventana y transformación del espacio del usuario. La transformación del espacio de la ventana está controlada por el cuadro de vista de la propiedad de los elementos relacionados (estos elementos crean nuevas ventanas); La transformación del espacio del usuario está controlada por el atributo de transformación del elemento gráfico. La transformación del espacio de la ventana se aplica a la ventana completa correspondiente, y la transformación del espacio del usuario se aplica al elemento actual y a sus elementos infantiles.

Transformación de la ventana - Propiedad ViewBox

Todos los elementos que pueden crear una ventana (consulte la siguiente sección), más el marcador, el patrón y los elementos de vista, tienen un atributo ViewBox.

El formato del valor del atributo ViewBox es (x0, y0, u_width, u_height), y cada valor está separado por una coma o espacio. Determinan conjuntamente el área que se muestra por la ventana: las coordenadas de la esquina superior izquierda de la ventana se establecen en (x0, y0), el ancho de la ventana se establece en u_width, y la altura es u_ight; Esta transformación funciona para toda la ventana.

No confunda aquí: el tamaño y la posición de la ventana han sido determinados por el elemento que crea la ventana y los elementos periféricos (por ejemplo, la ventana creada por el elemento SVG más externo está determinada por CSS, ancho y altura). El cuadro de vista aquí en realidad es establecer este área determinada para mostrar qué parte del sistema de coordenadas de ventana.

La configuración de ViewBox en realidad incluye dos transformaciones: zoom y traducción del espacio de la ventana.

El cálculo de la transformación también es muy simple: tome la ventana de vista del elemento SVG más externo como ejemplo, suponiendo que el ancho y la longitud de SVG estén establecidos en ancho, altura y la configuración de ViewBox es (X0, Y0, U_Width, U_Height). Luego, las escamas de ancho y altura de la figura dibujada son: ancho/u_width, altura/u_ight respectivamente. Las coordenadas de la esquina superior izquierda de la ventana se establecen en (x0, y0).

Experimente las diferencias en los resultados dibujados por los siguientes códigos:

</svg>

En la figura dibujada en el ejemplo anterior, puede ver rectángulos verdes y rojos. En este caso, los puntos en el sistema de coordenadas de la ventana aún corresponden a los puntos en la ventana, que también es el valor predeterminado.

</svg>

En la figura dibujada en el ejemplo anterior, solo puede ver el rectángulo verde, y el rectángulo verde se muestra en la pantalla con 200*200 píxeles. En este momento, los puntos de coordenadas ya no son uno por uno, y la cifra se amplía.

</svg>

En la figura dibujada en el ejemplo anterior, las unidades del sistema de coordenadas de la ventana se reducen, por lo que ambos rectángulos se reducen.

En el trabajo diario, una tarea que a menudo necesitamos completar es escalar un conjunto de gráficos para adaptarlo a su contenedor principal. Podemos lograr esto configurando la propiedad ViewBox.

Elementos que pueden crear nuevas ventanas

En cualquier momento, podemos anidar ventanas. Al crear una nueva ventana, se creará un nuevo sistema de coordenadas de ventana y un sistema de coordenadas de usuarios y, por supuesto, se creará una nueva, incluida la ruta de recorte. La siguiente es una lista de elementos que pueden crear una nueva ventana:

SVG : SVG admite anidación.

Símbolo : cree una nueva ventana cuando el elemento de uso instanciado.

Imagen : se crea una nueva ventana al hacer referencia a un elemento SVG.

ExtrayObject : cree una nueva ventana para representar el objeto en el interior.

Mantener escalado escala-presente de preservación

A veces, especialmente al usar ViewBox, esperamos que los gráficos ocupen toda la ventana en lugar de escalar en la misma proporción en ambas direcciones. A veces, esperamos que las dos direcciones de la figura se escalen a una escala fija. Utilice el atributo preservador de la compra para lograr el propósito de controlar esto.

Esta propiedad es todos los elementos que pueden crear una nueva ventana, más imagen, marcador, patrón y elementos de vista. Además, el atributo PreserveAspectratio solo funcionará después de que ViewBox esté configurado en el elemento. Si no se establece el cuadro ViewBox, se ignora la propiedad PreserveaSpectratio.

La sintaxis del atributo es la siguiente: PreserSpEespectratio = [Derfer] <arnign> [<MeunsLice>]

Tenga en cuenta que los 3 parámetros deben separarse por espacios.

Diferir : parámetro opcional, solo válido para elementos de imagen. Si el valor del atributo PreserveAspectratio en el elemento de imagen comienza con diferir, significa que el elemento de imagen utiliza la relación de escala de la imagen referenciada. Si la imagen referenciada no tiene una relación de escala, se ignora el diferencial. Todos los demás elementos ignoran esta cadena.

Alinear : este parámetro determina la alineación de la escala unificada, y se pueden tomar los siguientes valores:

Ninguno - Escalado unificado no forzado, para que los gráficos puedan llenar toda la ventana gráfica.

xminimina: fuerza de escala uniforme de fuerza y alinee el <min-x> y <min-y> establecido en el cuadro de vista a los valores mínimos x e y de la ventana gráfica.

xmidimina: fuerza la escala unificada y alinee el punto medio en la dirección X en VivewBox al punto medio de la dirección X de la ventana gráfica. En resumen, el punto medio en la dirección X está alineado, y la dirección y es la misma que arriba.

xmaxymina: fuerza de fuerza uniforme y alinee el <min-x> + <width> establecido en ViewBox al valor máximo x de la ventana gráfica.

Hay otros tipos de valores similares a: xminymid, xmidymid, xmaxymid, xminymax, xmidymax, xmaxymax. El significado de estas combinaciones es similar a las situaciones anteriores.

MeetorSlice : parámetro opcional, puede usar los siguientes valores:

Reunir al valor predeterminado, escalar de manera uniforme los gráficos, para que todos los gráficos se muestren en la ventana gráfica.

Slice: escala unificada de los gráficos, lo que permite que los gráficos llenen la ventana gráfica, y los excesos se cortan.

La siguiente figura explica los efectos de varios rellenos:

Transformación del sistema de coordenadas de usuario: atributo de transformación

Este tipo de transformación se especifica configurando la propiedad de transformación del elemento. Cabe señalar aquí que la transformación del elemento establecido por el atributo de transformación solo afecta el elemento y sus elementos infantiles, no tiene nada que ver con otros elementos y no afecta a otros elementos.

Traducción - Traducir

La transformación de traducción traduce los valores de coordenadas relevantes a la posición especificada, y la transformación debe pasar a la cantidad traducida en ambos ejes. Ver ejemplo:

Este ejemplo dibuja un rectángulo y traduce su punto de partida (0,0) a (30,40). Aunque el valor coordinado de (x, y) se puede establecer directamente, también es muy conveniente implementarlo utilizando la transformación de traducción. Se puede omitir el segundo parámetro de esta transformación, y el valor predeterminado se procesa cuando se procesa 0.

Girar - Gire

Rotar un elemento también es una tarea muy común. Podemos usar la transformación de rotación para implementarla, lo que requiere que se pase el parámetro del ángulo de rotación. Ver ejemplo:

Este ejemplo muestra un rectángulo de rotación de 45 grados. Algunas notas:

1. La transformación aquí toma el valor del ángulo como el parámetro.

2. La rotación se refiere a la rotación en relación con el eje x.

3. La rotación se expande alrededor del origen (0,0) del sistema de coordenadas del usuario.

Inclinado - sesgo

La transformación también admite la transformación de inclinación, que se puede inclinar a lo largo del eje x (los ángulos de izquierda y izquierda y derecha están inclinadas hacia la derecha, que en realidad está inclinada al eje y), o a lo largo del eje y (arriba y abajo, que se inclina hacia el ángulo hacia abajo, que en realidad está inclinado al eje x). Esta transformación requiere que se pase un parámetro ángulo, que determinará el ángulo de inclinación. Vea el siguiente ejemplo:

<svg>

<círculo cx = "15" cy = "15" r = "15" relleno = "rojo" />

<círculo cx = "15" cy = "15" r = "15" relleno = "amarillo" transform = "skewx (45)" />

</svg>

Del resultado, puede ver directamente la posición y la forma del rectángulo del mismo tamaño después de diferentes transformaciones de inclinación. Tenga en cuenta aquí que la posición inicial del rectángulo ha cambiado, porque en el nuevo sistema de coordenadas (30,30) ya está en diferentes posiciones.

Escala

El objeto de escala se completa mediante una transformación de escala, que acepta 2 parámetros, especificando las relaciones de escala en horizontal y vertical respectivamente. Si se omite el segundo parámetro, se toma el mismo valor que el primer parámetro. Vea el siguiente ejemplo:

<svg>

<Text x = "20" y = "20" font-size = "20"> ABC (escala) </ext>

<Text x = "50" y = "50" font-size = "20" transform = "escala (1.5)"> ABC (escala) </ext>

</svg>

Matriz de transformación - Matriz

Cualquiera que haya estudiado gráficos sabe que todas las transformaciones están realmente representadas por matrices, por lo que las transformaciones anteriores pueden ser representadas por una matriz 3*3:

bdf

0 0 1

Como solo se usan 6 valores, también se abrevia como [ABCDEF]. Asigne matriz (A, B, C, D, E, F) para transformar para implementar la transformación correspondiente. La transformación convertirá ambas coordenadas y longitudes en nuevas dimensiones. Las matrices correspondientes de las transformaciones anteriores son las siguientes:

Transformación de traducción [1 0 1 0 TX Ty]:

1 0 TX

0 1 ty

0 0 1

Transformación de escala [SX 0 0 SY 0 0]:

SX 0 0

0 SY 0

0 0 1

Transformación rotacional [cos (a) sin (a) -sin (a) cos (a) 0 0]:

cos (a) -sin (a) 0

pecado (a) cos (a) 0

00 1

Inclinación a lo largo del eje x [1 0 tan (a) 1 0 0]:

1 Tan (a) 0

0 1 0

0 0 1

Inclinación a lo largo del eje y [1 tan (a) 0 1 0 0]:

11 0

Tan (a) 1 0

00 1

Cambiar la esencia

Cuando resumimos el lienzo antes, sabíamos que todo tipo de transformaciones se aplican al sistema de coordenadas del usuario. En SVG, todas las transformaciones también son para dos sistemas de coordenadas (esencialmente sistemas de coordenadas de usuario). Después de especificar el atributo de transformación al objeto contenedor o el objeto gráfico, o especificar el atributo ViewBox a SVG, símbolo, marcador, patrón, vista, SVG se transformará de acuerdo con el sistema de coordenadas de usuario actual para crear un nuevo sistema de coordenadas de usuario y actuará en el objeto actual y sus subbjetos. Las unidades de coordenadas y longitud especificadas en este objeto ya no son 1: 1 correspondientes al sistema de coordenadas periféricas, sino que se convierten en el nuevo sistema de coordenadas de usuario a medida que se deforma; Este nuevo sistema de coordenadas de usuario solo actúa sobre el elemento actual y sus elementos infantiles.

Cadena de transformación

La propiedad de transformación admite la configuración de múltiples transformaciones. Estas transformaciones están separadas por espacios en el medio y se colocan juntas en la propiedad. El efecto de ejecución es el mismo que realizar estas transformaciones de forma independiente en orden.

<!-Elementos gráficos vaya aquí->

</g>

El efecto anterior es el mismo que el siguiente:

<!-Elementos gráficos vaya aquí->

</g>

unidad

Finalmente, hablemos de unidades. Cualquier coordenada y longitud puede equiparse con y sin unidades.

Sin unidad

Se considera que un valor sin unidades tiene unidades de usuario, que es el valor unitario del sistema de coordenadas de usuario actual.

La situación de traer unidades

Las unidades relevantes en SVG son las mismas que en CSS: EM, EX, PX, PT, PC, CM, MM e IN. % También se puede usar para la longitud.

Unidades relativas de medición: EM y EX también son similares a CSS, en relación con el tamaño de la fuente y la altura X de la fuente actual.

Unidad de medición absoluta: un PX es igual a una unidad de usuario, es decir, 5px es la misma que 5. Sin embargo, si un PX corresponde a un píxel depende de si ha habido algunas transformaciones.

Las otras unidades son básicamente múltiplos de px: 1pt = 1.25px, 1pc = 15px, 1 mm = 3.543307px, 1cm = 35.43307px, 1in = 90px.

Si el ancho y la altura del elemento SVG más externo no especifican unidades (es decir, unidades de usuario), estos valores se considerarán PX.

Este artículo es bastante difícil de hablar. De hecho, solo recuerde que las coordenadas y la longitud del elemento gráfico se refieren a las coordenadas y la longitud del nuevo sistema de coordenadas de usuario después de la doble transformación del sistema de coordenadas de ventana y la transformación del sistema de coordenadas del usuario.

Referencia práctica:

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de desarrollo: https://developer.mozilla.org/en/svg

Referencia popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/