Sistema de coordenadas de SVG

Al igual que muchos sistemas de coordenadas utilizados en la dibujo de computadora, el SVG también utiliza el sistema de coordenadas de malla. Este sistema de coordenadas tiene las siguientes características: el origen del sistema de coordenadas es la esquina superior izquierda (0,0), la dirección positiva del eje X se mueve hacia la derecha, comienza en el punto 0,0 y x aumenta gradualmente. La dirección positiva del eje Y se mueve hacia abajo, comienza en el punto 0,0 y y aumenta gradualmente. Las coordenadas se expresan en píxeles

El sistema de coordenadas del SVG (y la mayoría de otros gráficos de computadora) es ligeramente diferente del sistema de coordenadas matemático y gráfico.

　Matemáticas/Sistema de coordenadas cartesiano

En el sistema de coordenadas rectangulares, el punto x=0, y=0 se encuentra en la esquina inferior izquierda del gráfico. A medida que aumenta x, el punto se mueve hacia la derecha en el sistema de coordenadas. Cuando disminuye x, el punto se mueve hacia la izquierda en el sistema de coordenadas. A medida que aumenta y, el punto se mueve hacia arriba en el sistema de coordenadas. Cuando disminuye y, el punto se mueve hacia abajo en el sistema de coordenadas.

Esta es la ilustración del sistema de coordenadas del sistema de coordenadas gráfico común, su esquina inferior izquierda es 0,0:

Sistema de coordenadas del SVG

En el sistema de coordenadas del SVG, el punto x=0, y=0 es la esquina superior izquierda. Por lo tanto, en comparación con el sistema de coordenadas gráfico común, el eje y es inverso. A medida que aumenta y en el SVG, los puntos, las formas y otros se mueven hacia abajo, no hacia arriba.

Esta es la ilustración del sistema de coordenadas del SVG, 0,0 en la esquina superior izquierda:

Unidad del sistema de coordenadas

Se puede especificar en el sistema de coordenadas del SVG1La unidad correspondiente a la unidad. Puede ejecutar esta operación en cualquier lugar donde se pueda especificar la coordinada (ubicación x e y, width y height, etc.). Puede especificar la unidad después del valor, por ejemplo10cm o125mm。

Si no se especifica ninguna unidad después de los valores de coordenadas, se asume que la unidad es píxeles (px).

Esta es la lista de unidades que se pueden usar con los elementos SVG:

El <svg> en los atributos de width y height establece la unidad solo en el elemento <svg> (viewport). Las formas dentro del elemento <svg> deben establecer sus propias unidades. Del mismo modo, si no se especifica una unidad, la unidad predeterminada es píxeles.