Transformações no SVG

A conversão SVG cria formas em imagens SVG. Por exemplo, mover, ajustar o tamanho e girar formas. Este é um método conveniente para exibir texto vertical ou diagonal.

exemplo de conversão

Este é um exemplo simples:

<svg  xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="50" y="50" height="110" width="110"
　　　　　　　　　　style="stroke:#ff0000;  fill:  #ccccff"  transform="translate(30)  rotate(45　50　50)"
　　　　　　　　　　　　>
　　　　</rect>
　　　　<text  x="70" y="100"  transform="translate(30)  rotate(45　50　50)"
　　　　>oldtoolbag.com</text>
</svg>

Efeito de imagem após a execução:

notar<rect>elementotransform e <text>dotransformpropriedade. Esta propriedade especifica a transformação a ser aplicada à forma. Neste exemplo, é aplicada translação e rotação. Ambos serão explicados mais à frente neste artigo.

quais elementos podem ser transformados?

Você pode aplicar a transformação a todas as formas SVG. Você também pode aplicar a transformação a<g> 　 　elementos, transformando todo o grupo de elementos de uma vez, de forma eficaz. Também pode transformar gradiente e padrão de preenchimento.

funções de conversão

O SVG fornece quatro funções de conversão:

• translate()

• rotate()

• scale()

• skew()

• matrix()

As seguintes seções fornecerão uma explicação mais detalhada de cada uma dessas funções.

Na verdade, a função de conversão não converte automaticamente a forma SVG, mas converte o sistema de coordenadas básico da forma. Portanto, mesmo que a largura seja exibida em múltiplos, a largura20 multiplicado por2a forma ainda tem lógica20 de largura.

mover

translate()função move a forma. Você vaix e y　 passar o valor paratranslate()função. Este é um exemplo:

translate(50,25)

Este exemplo move a forma ao longo do eixo x5unidades, e se move ao longo do eixo y25unidades.

Este é um exemplo que mostra duas formas com posições e tamanhos iguais, com e sem translação:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#cc3333"/>
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#3333cc"  transform="translate(75,25)">/rect>
</svg>

Efeito de imagem após a execução:

Observe que, em comparação com a primeira (vermelha) forma, a segunda (azul) forma se move ao longo do eixo x75unidades, movendo-se ao longo do eixo y25unidades.

rotação

rotate()função roda a forma em torno do ponto 0,0. Este é um exemplo que mostra um retângulo (contorno) e rotação15retângulo equivalente após rotação (cheio):

<svg　width="500"　height="150">
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　　></rect>
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15)"
　　　　　　　　></rect>
　　　　</svg>

Efeito de imagem após a execução:

Para girar pontos além de 0,0, passe as coordenadas x e y do ponto paratransformA função. Este é um exemplo que mostra um retângulo não girado (contorno) e um retângulo igual (preenchido) girando ao redor de seu centro15graus:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　></rect>
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15,　40,　40)"
　　　　　　　></rect>
</svg>

Efeito de imagem após a execução:

Todas as rotações são no sentido horário, com ângulos de 0 a360. Se você quiser girar no sentido horário, passe negativos graus pararotate()A função.

escala

scale()A função amplia ou diminui a forma proporcionalmente.scale()A função pode escalar o tamanho e as coordenadas de posição da forma. Portanto, com20 multiplicado por2com uma largura escalonada proporcionalmente de2e a altura de3O retângulo de 0 está localizado20,20, sua largura de4e a altura de60.

scale()A função pode escalar a largura da linha da forma.

Este é um exemplo que mostra um retângulo não girado (contorno) e um retângulo igual (preenchido) girando ao redor de seu centro10,0, a largura de2e a altura de2O retângulo de 0 (azul) e um retângulo proporcional (preto) com uma escala de2:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; fill:none;">/rect>
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #000000; fill:none;"  transform="scale(2)">/rect>
</svg>

Efeito de imagem após a execução:

Observe como a posição e o tamanho do retângulo são escalonados.

Você pode escalonar a forma em x e y em outros fatores. Para isso, você pode passarscale()A função fornece x-escala e y-os parâmetros de escala, conforme mostrado:

scale(2,3);

Este exemplo escala a forma ao longo do eixo x2vezes, escalando a forma ao longo do eixo y3vezes. Este é um exemplo:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; fill:none;">/rect>
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #000000; fill:none;"  transform="scale(2,3)">/rect>
</svg>

Efeito de imagem após a execução:

Observe como a largura da linha do retângulo escalonado (preto) também é escalonada e as proporções de escala em x e y são diferentes.

usando a função de escala como função de espelho

scale()escalando ao longo do eixo x ou y-1proporção de escala, 　 　Pode usar essa função como uma função de espelho. Após concluir, você deve mover primeiro a forma no eixo x ou y (translação), caso contrário, a forma espelhada aparecerá fora do canvas SVG.

Este é um exemplo:

<svg　width="500"　height="150">
<path d="M20,20 l20,20 l0,20 l-20,20 Z
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<path d="M20,20 l20,20 l0,20 l-20,20 Z
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(100, 0) escalar(-1,　1) "　/></svg>

Isso é em x = 10o resultado da imagem da linha desenhada em 0 (porque o retângulo se moveu na direção x100).

Azul é a forma original. A forma preta é a forma escalonada.

desvio

skewX()eskewY()A função desvia o eixo x e y. Na verdade, essas funções inclinam o eixo dado a partir de um ângulo especificado em graus.

A seguir estão mostrados diferentesskewX()alguns exemplos de retângulos com valores.

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(10)"　/>
<rect x="100" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(45)"　/>
<rect x="150" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(60)"　/></svg>

Efeito de imagem após a execução:

Como você vê,skewX()A função faz a linha vertical parecer que girou um ângulo dado. Portanto,skewY()A função faz a linha horizontal parecer que girou um ângulo dado. Aqui estão alguns exemplos:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="deslocamentoY(60)"　/>
<rect x="100" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="deslocamentoY(45)"　/>
<rect x="150" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="deslocamentoY(10)"　/></svg>

Matriz

Também pode representar as transformações como matrizes. A matriz é como follows:

a　　c　　e
b　　d　　f
0　　0　　1

Devido ao fato de que só podem ser especificados os primeiros6Os valores, portanto, só podem ser fornecidos para funções de transformação matricial6Os valores. Este é um exemplo:

transform="matrix(a,b,c,d,e,f)"

Outras funções de transformação podem ser representadas como matrizes. Aqui estão alguns exemplos:

Mover
1　　0　　tx
0　　1　　ty
0　　0　　　1
matrix(1,0,0,1,tx,ty)

Girar
cos(a)　　　-sin(a)　　0
sin(a)　　　　cos(a)　　0
　　　　　0　　　　　　　　0　　　1
matrix(　cos(a),　sin(a),-sin(a),cos(a),0,0　)

Nota: Este valorcos(a)esin(a)Este parâmetro deve ser calculado previamente antes de inserir a matriz.aé o ângulo de rotação.

Escala
sx　　0　　0
　0　sy　　0
　0　　0　　1
matrix(sx,0,0,sy,0,0)

A transformação de deslocamento ao longo do eixo x pode ser escrita como:

Deslocamento
1　　tan(a)　　0
0　　　　　　　1　　0
0　　　　　　　0　　1
matrix(1,0,tan(a),1,0,0)

tan(a)Os valores devem ser inseridosmatrix()A função deve ser calculada previamente.

A transformação de deslocamento ao longo do eixo y pode ser representada como:

Deslocamento
1　　　　　　　0　　0
tan(a)　　1　　0
0　　　　　　　0　　1
matrix(1,tan(a),0,1,0,0)

Este é um exemplo de transformação matricial SVG simples, imitando a função de transformação:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#cc3333"/>
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="matrix(1,0,0,1,100,20)"
　　　　　　　　/>
</svg>

Efeito de imagem após a execução:

Observe como a forma da direita (azul) se transforma em comparação com o retângulo da esquerda (vermelho).

Combinar transformações

Transformações podem ser combinadas. Você pode fazer isso através detransformMultiplos funções de transformação podem ser colocadas dentro das propriedades para realizá-lo.

Este é um exemplo de primeiro mover (mover) e depois girar um retângulo. O exemplo mostra o retângulo (azul) antes e após a aplicação de qualquer transformação (preto).

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(50,0) rotate(30)"　/>
</svg>

Efeito de imagem após a execução:

A ordem da transformação é importante

A ordem da transformação é importante. EmtransformA ordem de especificação das funções de transformação dentro das propriedades é a ordem de aplicação às formas.

Os seguintes exemplos ilustram a diferença entre primeiro mover em linha reta e girar, e primeiro girar e depois mover a forma:

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　stroke-width:　2px; fill:none"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; stroke-width:　2px; fill:none"
　　　　　　transform="translate(100,0) rotate(45)"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #cc3333; stroke-width:　2px; fill:none"
　　　　　　transform="rotate(45) translate(100,0)"　/>
</svg>

Efeito de imagem após a execução:

O retângulo preto não aplicou nenhuma transformação. Primeiro, transladar o retângulo azul, então girar. Primeiro girar o retângulo vermelho, então transladar.