Introdução 2D SVG 2D do HTML5 - Visão geral do sistema de coordenadas do Windows e sistema de coordenadas do usuário e transformação

Autor：Eve Cole Data da Última Atualização：2025-04-06 02:00:03

Sistema de coordenadas

Existem dois sistemas de coordenadas no SVG: o sistema de coordenadas da janela e o sistema de coordenadas do usuário. Por padrão, os pontos do sistema de coordenadas do usuário e o sistema de coordenadas da janela correspondem um por um, os quais são a origem no canto superior esquerdo da janela, o eixo x é horizontalmente à direita e o eixo y é verticalmente para o descendente; Como mostrado na figura abaixo:

A posição da janela do SVG é geralmente especificada pelo CSS e o tamanho é definido pela largura do atributo e altura do elemento SVG. No entanto, se o SVG for armazenado em um objeto incorporado (como um elemento de objeto ou outro elemento SVG), e o documento que contém o SVG é formatado com CSS ou XSL, e o CSS ou outros valores de tamanho especificado desses objetos periféricos já podem calcular o tamanho da janela, o tamanho do tamanho periférico será usado.

Aqui precisamos distinguir os conceitos de Windows, sistemas de coordenadas de janelas e sistemas de coordenadas do usuário:

Janela : refere -se à área retangular visível na página da web, com comprimento e largura limitados, e essa área está geralmente relacionada ao tamanho do objeto periférico.

Sistema de coordenadas de janela : essencialmente um sistema de coordenadas com origem, eixo x e eixo y; E se estende infinitamente em ambas as direções. Por padrão, a origem está no canto superior esquerdo da janela, o eixo x é horizontalmente à direita e o eixo y é verticalmente para o descendente. Os pontos neste sistema de coordenadas podem ser transformados.

Sistema de coordenadas do usuário : essencialmente um sistema de coordenadas com origem, eixo x e eixo y; E se estende infinitamente em ambas as direções. Por padrão, a origem está no canto superior esquerdo da janela, o eixo x é horizontalmente à direita e o eixo y é verticalmente para o descendente. Os pontos neste sistema de coordenadas podem ser transformados.

Por padrão, o sistema de coordenadas da janela e o sistema de coordenadas do usuário se sobrepõem, mas deve -se notar aqui que o sistema de coordenadas da janela pertence ao elemento que cria a janela. Após a determinação do sistema de coordenadas da janela, o tom de coordenadas de toda a janela será determinado. No entanto, o sistema de coordenadas do usuário pertence a cada elemento gráfico. Enquanto o gráfico tiver transformação de coordenar, um novo sistema de coordenadas do usuário será criado. Todas as coordenadas e dimensões nesse elemento usam este novo sistema de coordenadas do usuário.

Para simplificar: o sistema de coordenadas da janela descreve o perfil de coordenadas iniciais de todos os elementos da janela e o sistema de coordenadas do usuário descreve o perfil de coordenadas de cada elemento. Por padrão, todos os elementos usam o sistema de coordenadas do usuário padrão que coincide com o sistema de coordenadas da janela.

Coordenar a transformação do espaço

Vamos revisar a transformação das coordenadas do usuário do Canvas, que são implementadas por meio de funções de tradução, escala e rotação; Cada transformação funcionará nas figuras desenhadas mais tarde, a menos que a transformação seja realizada novamente, que é o conceito do sistema atual de coordenadas do usuário. O Canvas possui apenas um sistema de coordenadas do usuário.

No SVG, a situação é completamente diferente. Como um elemento gráfico vetorial, o próprio SVG pode ser considerado essencialmente como sistemas de coordenadas do usuário; Ambos os espaços coordenados do SVG podem ser transformados: transformação do espaço da janela e transformação do espaço do usuário. A transformação do espaço da janela é controlada pelo Property ViewBox dos elementos relacionados (esses elementos criam novos Windows); A transformação do espaço do usuário é controlada pelo atributo de transformação do elemento gráfico. A transformação do espaço da janela é aplicada à janela inteira correspondente e a transformação do espaço do usuário é aplicada ao elemento atual e a seus elementos filhos.

Transformação da janela - Propriedade ViewBox

Todos os elementos que podem criar uma janela (consulte a próxima seção), além de marcadores, padrão e elementos, têm um atributo ViewBox.

O formato do valor do atributo ViewBox é (x0, y0, u_width, u_height) e cada valor é separado por uma vírgula ou espaço. Eles determinam em conjunto a área exibida pela janela: as coordenadas do canto superior esquerdo da janela são definidas como (x0, y0), a largura da janela é definida como U_Width e a altura é U_Height; Essa transformação funciona para toda a janela.

Não confunda aqui: o tamanho e a posição da janela foram determinados pelo elemento que cria a janela e os elementos periféricos (por exemplo, a janela criada pelo elemento SVG mais externo é determinado pelo CSS, largura e altura). O ViewBox aqui é realmente definir esta área determinada para exibir qual parte do sistema de coordenadas da janela.

A configuração do ViewBox na verdade inclui duas transformações: zoom e tradução do espaço da janela.

O cálculo da transformação também é muito simples: pegue a janela de exibição do elemento SVG mais externo como exemplo, assumindo que a largura e o comprimento do SVG estão definidos como largura, altura e a configuração do ViewBox é (x0, y0, u_width, u_height). Em seguida, as escalas de largura e altura da figura desenhada são: largura/u_width, altura/u_height, respectivamente. As coordenadas do canto superior esquerdo da janela são definidas como (x0, y0).

Experimente as diferenças nos resultados obtidos pelos seguintes códigos:

</svg>

Na figura desenhada no exemplo acima, você pode ver retângulos verdes e vermelhos. Nesse caso, os pontos no sistema de coordenadas da janela ainda correspondem aos pontos da janela, que também é o padrão.

</svg>

Na figura desenhada no exemplo acima, você pode ver apenas o retângulo verde e o retângulo verde é exibido na tela com 200*200 pixels. Neste momento, os pontos de coordenadas não são mais um a um, e a figura é aumentada.

</svg>

Na figura desenhada no exemplo acima, as unidades do sistema de coordenadas da janela são reduzidas, de modo que ambos os retângulos são reduzidos.

No trabalho diário, uma tarefa que geralmente precisamos concluir é escalar um conjunto de gráficos para adaptá -lo ao seu contêiner pai. Podemos conseguir isso definindo a propriedade ViewBox.

Elementos que podem criar novas janelas

A qualquer momento, podemos aninhar janelas. Ao criar uma nova janela, será criado um novo sistema de coordenadas de janela e um sistema de coordenadas do usuário e, é claro, um novo será criado, incluindo o caminho de recorte. A seguir, é apresentada uma lista de elementos que podem criar uma nova janela:

SVG : SVG suporta o ninho.

Símbolo : Crie uma nova janela quando instanciada pelo elemento de uso.

Imagem : Uma nova janela é criada ao referenciar um elemento SVG.

ForeignObject : Crie uma nova janela para renderizar o objeto dentro.

Mantenha a propriedade de escala de escala-preserveaspetratio

Às vezes, especialmente ao usar o ViewBox, esperamos que os gráficos ocupem toda a janela em vez de escalar na mesma proporção em ambas as direções. Às vezes, esperamos que as duas direções da figura sejam escaladas em escala fixa. Use o atributo PreserveasPectratio para alcançar o objetivo de controlar isso.

Esta propriedade são todos os elementos que podem criar uma nova janela, além de elementos de imagem, marcador, padrão e visualização. Além disso, o atributo PreserveasPectratio só funcionará depois que o ViewBox for definido como o elemento. Se o ViewBox não estiver definido, a propriedade PreserveasPectratio será ignorada.

A sintaxe do atributo é a seguinte: PreserveasPectratio = [adiar] <Align> [<metorslice>]]

Observe que os 3 parâmetros precisam ser separados por espaços.

adiar : parâmetro opcional, válido apenas para elementos de imagem. Se o valor do atributo PreserveasPectratio no elemento de imagem começar com o adiamento, isso significa que o elemento de imagem usará a taxa de escala da imagem referenciada. Se a imagem referenciada não tiver uma taxa de escala, o adiar será ignorado. Todos os outros elementos ignoram essa string.

alinhado : Este parâmetro determina o alinhamento da escala unificada, e os seguintes valores podem ser tomados:

Nenhum - Escala unificada não forçada, para que os gráficos possam preencher toda a viewport completamente.

XMInymina-Força a escala uniforme e alinhe os <min-x> e <in-y> definidos no ViewBox com os valores mínimos x e y da viewport.

Xmidymina - Força a escala unificada e alinhe o ponto médio na direção x na caixa Vivewbox até o ponto médio da direção x da viewport. Em suma, o ponto médio na direção x está alinhado e a direção y é a mesma que acima.

Xmaxymina - Força a escala uniforme e alinhe o <min -x> + <wdth> definido no ViewBox com o valor máximo x da viewport.

Existem outros tipos de valores semelhantes a: xminymid, xmidymid, xmaxymid, xminymax, xmidymax, xmaxymax. O significado dessas combinações é semelhante às situações acima.

Metorslice : parâmetro opcional, você pode usar os seguintes valores:

Meet - Valor padrão, escala uniformemente os gráficos, para que todos os gráficos sejam exibidos na viewport.

Slice - Escala unificada dos gráficos, permitindo que os gráficos preencham a viewport, e os excessos são cortados.

A figura a seguir explica os efeitos de vários preenchimentos:

Transformação do sistema de coordenadas do usuário - Transforme o atributo

Esse tipo de transformação é especificado definindo a propriedade de transformação do elemento. Deve -se notar aqui que a transformação do elemento definida pelo atributo de transformação afeta apenas o elemento e seus elementos filhos, não tem nada a ver com outros elementos e não afeta outros elementos.

Tradução - Traduzir

A transformação de tradução traduz os valores de coordenadas relevantes para a posição especificada, e a transformação precisa ser passada para a quantidade traduzida nos dois eixos. Veja o exemplo:

Este exemplo desenha um retângulo e traduz seu ponto de partida (0,0) para (30,40). Embora o valor de coordenada de (x, y) possa ser definido diretamente, também é muito conveniente implementá -lo usando a transformação da tradução. O segundo parâmetro dessa transformação pode ser omitido e o padrão é processado quando 0 é processado.

Gire - gire

Girar um elemento também é uma tarefa muito comum. Podemos usar a transformação de rotação para implementá -la, que requer que o parâmetro do ângulo de rotação seja passado. Veja o exemplo:

Este exemplo mostra um retângulo de rotação de 45 graus. Algumas notas:

1. A transformação aqui assume o valor do ângulo como o parâmetro.

2. A rotação refere-se à rotação em relação ao eixo x.

3. A rotação é expandida em torno da origem (0,0) do sistema de coordenadas do usuário.

Inclinado - inclinação

A transformação também suporta a transformação de inclinação, que pode ser inclinada ao longo do eixo x (os ângulos esquerdo e esquerdo e direito são inclinados para a direita, que na verdade é inclinada para o eixo y), ou ao longo do eixo y (de cima e para baixo, que é inclinado para o ângulo descendente, que é realmente inclinado ao eixo x). Essa transformação requer um parâmetro de ângulo a ser passado, que determinará o ângulo de inclinação. Veja o seguinte exemplo:

<Svg>

<círculo cx = "15" cy = "15" r = "15" preench = "vermelho" />

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

</svg>

A partir do resultado, você pode ver diretamente a posição e a forma do retângulo do mesmo tamanho após diferentes transformações de inclinação. Observe aqui que a posição inicial do retângulo mudou, porque no novo sistema de coordenadas (30,30) já está em posições diferentes.

Escala de escala

O objeto de escala é concluído por uma transformação de escala, que aceita 2 parâmetros, especificando as taxas de escala na horizontal e na vertical, respectivamente. Se o segundo parâmetro for omitido, o mesmo valor que o primeiro parâmetro será obtido. Veja o seguinte exemplo:

<Svg>

<texto x = "20" y = "20" font-size = "20"> abc (escala) </sext>

<texto x = "50" y = "50" font-size = "20" transform = "Scale (1.5)"> abc (escala) </sext>

</svg>

Matrix de transformação - Matrix

Qualquer pessoa que tenha estudado gráficos sabe que todas as transformações são realmente representadas por matrizes, para que as transformações acima possam ser representadas por uma matriz de 3*3:

ás

BDF

0 0 1

Como apenas 6 valores são usados, ele também é abreviado como [ABCDEF]. Atribua Matrix (A, B, C, D, E, F) para se transformar para implementar a transformação correspondente. A transformação converterá coordenadas e comprimentos em novas dimensões. As matrizes correspondentes das transformações acima são as seguintes:

Transformação da tradução [1 0 1 0 tx ty]:

1 0 TX

0 1 ty

0 0 1

Transformação de escala [sx 0 0 sy 0 0]:

SX 0 0

0 sy 0

0 0 1

Transformação rotacional [cos (a) sin (a) -sin (a) cos (a) 0 0]:

cos (a) -sin (a) 0

sin (a) cos (a) 0

00 1

Inclinação ao longo do eixo x [1 0 tan (a) 1 0 0]:

1 bronzeado (a) 0

0 1 0

0 0 1

Inclinação ao longo do eixo y [1 tan (a) 0 1 0 0]:

11 0

bronzeado (a) 1 0

00 1

Mude a essência

Quando resumimos a tela antes, sabíamos que todos os tipos de transformações são aplicados ao sistema de coordenadas do usuário. No SVG, todas as transformações também são para dois sistemas de coordenadas (essencialmente sistemas de coordenadas do usuário). Depois de especificar o atributo de transformação para o objeto de contêiner ou o objeto gráfico ou especificar o atributo ViewBox para SVG, símbolo, marcador, padrão, visualização, SVG se transformará de acordo com o sistema atual de coordenadas do usuário para criar um novo sistema de coordenadas do usuário e atuar no objeto atual e seus subobjetos. As unidades de coordenadas e comprimento especificadas neste objeto não são mais 1: 1 correspondentes ao sistema de coordenadas periféricas, mas são convertidas para o novo sistema de coordenadas do usuário à medida que se deforma; Esse novo sistema de coordenadas do usuário atua apenas no elemento atual e em seus elementos filhos.

Cadeia de transformação

A propriedade Transform suporta definir várias transformações. Essas transformações são separadas apenas por espaços no meio e colocadas juntas na propriedade. O efeito de execução é o mesmo que executar essas transformações independentemente em ordem.

<!-Elementos gráficos vêm aqui->

</g>

O efeito acima é o mesmo que o seguinte:

<!-Elementos gráficos vêm aqui->

</g>

unidade

Finalmente, vamos falar sobre unidades. Quaisquer coordenadas e comprimentos podem ser equipados com e sem unidades.

Sem unidade

Considera -se que um valor sem unidades possui unidades de usuário, que é o valor unitário do sistema atual de coordenadas do usuário.

A situação de trazer unidades

As unidades relevantes no SVG são as mesmas que no CSS: em, ex, px, pt, pt, cm, mm e pol. % Também podem ser usadas para o comprimento.

As unidades relativas de medição: EM e EX também são semelhantes ao CSS, em relação ao tamanho da fonte e à altura X da fonte atual.

Unidade de medição absoluta: um px é igual a uma unidade de usuário, ou seja, 5px é o mesmo que 5. No entanto, se um PX corresponde a um pixel depende se houve algumas transformações.

As outras unidades são basicamente múltiplas de px: 1pt = 1,25px, 1pc = 15px, 1mm = 3,543307px, 1cm = 35.43307px, 1in = 90px.

Se a largura e a altura do elemento SVG mais externo não especificar unidades (ou seja, unidades de usuário), esses valores serão considerados PX.

Este artigo é bastante difícil de falar. De fato, lembre -se de que as coordenadas e o comprimento do elemento gráfico consulte as coordenadas e o comprimento do novo sistema de coordenadas do usuário após a dupla transformação do sistema de coordenadas da janela e a transformação do sistema de coordenadas do usuário.

Referência prática:

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

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

Referência popular: http://www.chinasvg.com/

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