Sistema de Coordenadas SVG

Como muitos sistemas de desenho de computador, o SVG também usa o sistema de coordenadas de grade. Esse sistema de coordenadas tem as seguintes características: o ponto de origem do sistema de coordenadas é o canto superior esquerdo (0,0), o eixo X é direcionado para a direita, começando do ponto 0,0, x aumenta gradualmente. O eixo Y é direcionado para baixo, começando do ponto 0,0, y aumenta gradualmente. As coordenadas são em pixels

O sistema de coordenadas do SVG (e a maioria das outras gráficas de computador) é ligeiramente diferente do sistema de coordenadas matemático, gráfico etc.

　Matemática/Sistema de coordenadas cartesiano

No sistema de coordenadas cartesiano, o ponto x=0, y=0 está no canto inferior esquerdo da figura. Com o aumento de x, o ponto se move para a direita no sistema de coordenadas. Quando x diminui, o ponto se move para a esquerda no sistema de coordenadas. Com o aumento de y, o ponto se move para cima no sistema de coordenadas. Quando y diminui, o ponto se move para baixo no sistema de coordenadas.

Este é o diagrama do sistema de coordenadas gráficas comuns, cujo canto inferior esquerdo é 0,0:

Sistema de coordenadas do SVG

No sistema de coordenadas do SVG, o ponto x=0, y=0 é no canto superior esquerdo. Portanto, em comparação com o sistema de coordenadas gráficas comuns, o eixo y é inverso. Com o aumento de y no SVG, os pontos, formas etc. se movem para baixo, não para cima.

Este é o diagrama do sistema de coordenadas do SVG, 0,0 no canto superior esquerdo:

unidade do sistema de coordenadas

pode especificar o sistema de coordenadas do SVG1A unidade correspondente ao unitário. Você pode executar essa operação em qualquer lugar onde você pode especificar coordenadas (posição x e y, width e height, etc.). Você pode especificar a unidade após o valor, por exemplo10cm ou125mm。

Se não for especificada nenhuma unidade após o valor de coordenada, assume-se que a unidade é pixel (px).

Esta é a lista de unidades que podem ser usadas com elementos SVG:

O <svg> em width e height atributos define a unidade no elemento, afetando apenas o <svg> (viewport). As formas dentro do <svg> devem definir suas próprias unidades. Da mesma forma, se não for especificado a unidade, a unidade padrão é pixel.