Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform

Attribute
By Sara Souiedan

Os elementos SVG podem ser transformados escalando, transladando, inclinando e girando - bem
como elementos HTML podem ser transformados usando "CSS Transform". Entretanto, existem certas
diferenças inevitáveis quando se trata dos sistemas de coordenadas usados e afetados por essas
transformações. Neste artigo, examinaremos o atributo de transformação SVG e a propriedade CSS,
descrevendo como usá-lo e as coisas que você deve saber sobre as transformações do sistema de
coordenadas SVG.

Os valores do atributo "transform"

O atributo "transform" é usado para especificar uma ou mais transformações em um elemento. É

necessário um <transform-list> com um valor que é definido como uma lista de definições de
transformação, que são aplicadas na ordem fornecida. As definições individuais de transformação são
separadas por espaços em branco e / ou vírgula. Um exemplo de aplicar uma transformação a um
elemento pode ter o seguinte aspecto:

As possíveis transformações SVG são: rotação (rotate), escalonamento (scale), translação (translate) e
inclinação (skew). As funções de transformação usadas no atributo "transform" funcionam de forma
semelhante à forma como as funções de CSS funcionam na propriedade "transform", exceto que eles
tomam argumentos diferentes.

Matrix

Você pode aplicar uma ou mais transformações a um elemento SVG usando a função "matrix()". A
sintaxe para a transformação de matriz é:
matrix(<a> <b> <c> <d> <e> <f>)

A declaração acima especifica uma transformação na forma de uma matriz de transformação de seis
valores. Matrix (a, b, c, d, e, f ) é equivalente à aplicação da transformação matrix [a b c d e f ].

Para aqueles de vocês que não são matemáticos experientes, provavelmente não usarão esta função. Uma
vez que esta função é raramente usada - se alguma vez - eu vou apenas pular para as outras funções de
transformação.

Translação (translate)

Para transladar um elemento SVG, você pode usar a função "translate ()". A sintaxe para a função é:
translate(<tx> [<ty>])

A função "translate ()" leva um ou dois valores que especificam os valores de translação horizontal e
vertical, respectivamente. "Tx" representa o valor de deslocamento ao longo do eixo (x); "Ty" representa
o valor de deslocamento ao longo do eixo (y).

O valor "Ty" é opcional; se omitido, o padrão é zero. Os valores de "tx" e "ty" podem ser separados por
espaço ou por vírgulas e não levam nenhuma unidade dentro da função - eles são padrão para as
unidades de sistema de coordenadas de usuário atuais.

O exemplo a seguir converte um elemento por 100 unidades de usuário para a direita e 300 unidades de
usuário para a parte inferior:
<circle cx="0" cy="0" r="100" transform="translate(100 300)" />

O exemplo acima ainda é válido se a transformação for aplicada usando "translate (100, 300)" onde os
valores são separados por vírgulas.

Escala (scale)

Você pode redimensionar um elemento SVG escalando-o para cima ou para baixo usando a função de
transformação "scale ()". A sintaxe para a transformação de escala é:
scale (<sx> [<sy>])

A função "scale ()" leva um ou dois valores que especificam os valores de escala horizontal e vertical,
respectivamente. "Sx" representa o valor de escala ao longo do eixo (x), utilizado para esticar ou
encolher o elemento horizontalmente; "Sy" representa o valor de escala ao longo do eixo (y), usado para
esticar ou encolher o elemento verticalmente.

O valor "sy" é opcional; se omitido, assume-se que é igual a "sx". Os valores "sx" e "sy" podem ser
separados por espaço ou separados por vírgulas, e são números sem unidade.

O exemplo a seguir duplica o tamanho de um elemento por escaloná-lo para duas vezes seu tamanho
original:
<rect width="150" height="100" transform="scale(2)" x="0" y="0" />

O exemplo seguinte estica um elemento horizontalmente a 1.5 de sua largura original e encolhe-o
verticalmente a metade de sua altura original:
<rect x = "0" y = "0" width = "150" height = "100" transform = "escala (2 0,5)" />

O exemplo acima ainda é válido se a transformação for aplicada usando "scale (2, .5)" onde os valores
são separados por vírgulas.

É importante notar aqui que quando um elemento SVG é dimensionado, todo o seu sistema de
coordenadas atual é dimensionado, resultando no elemento também sendo reposicionado dentro da
viewport. Não se preocupe com isso agora, vamos entrar em mais detalhes na próxima seção.

Inclinar (skew)

Um elemento SVG também pode ser distorcido. Para incliná-lo, você pode usar uma ou ambas as
funções de transformação de inclinação: skewX( ) e skewY( ).
SkewX (<ângulo de inclinação>)
SkewY (<ângulo de inclinação>)

A função skewX especifica uma transformação de inclinação ao longo do eixo (x); a função skewY
especifica uma transformação de inclinação ao longo do eixo (y).

O ângulo de inclinação especificado é um ângulo sem unidade cujo padrão é graus (degrees).

Observe que inclinar um elemento pode resultar no elemento sendo reposicionado dentro da viewport.

Rotação (rotate)

Você pode girar um elemento SVG usando a função "rotate ()". A sintaxe para a função é:

rotate (<rotate-angle> [<cx> <cy>])

A função rotate () especifica uma rotação por graus de ângulo de rotação sobre um dado ponto. Ao
contrário das transformações de rotação em CSS, você não pode especificar uma unidade de ângulo
diferente de graus. O valor de ângulo é especificado sem unidade e é considerado um valor de graus por
padrão.

Os valores opcionais "cx" e "cy" representam as coordenadas, sem unidade, do ponto utilizado como
centro de rotação. Se "cx" e "cy" não forem fornecidos, a rotação é sobre a origem do atual sistema de
coordenadas do usuário.

Especificar um centro de rotação dentro da função "rotate ()" é como uma forma abreviada de definir
"transform: rotate ()" e "transform-origin" em CSS. Uma vez que o centro de rotação padrão em SVG é
o canto superior esquerdo do sistema de coordenadas do usuário atual em uso, e uma vez que não pode
permitir que você crie o efeito de rotação que você quer, você provavelmente vai acabar especificando
um novo centro dentro de "rotate ()" . Se você conhece as dimensões e posição do seu elemento na tela
SVG, você pode facilmente especificar seu centro como o centro de rotação.

O exemplo a seguir gira um grupo de elementos em torno de um centro de rotação especificado

posicionado em (50, 50) no sistema de coordenadas do usuário atual:

<g id="parrot" transform="rotate(45 50 50)" x="0" y="0">

<!-- Elementos que compõem uma forma de papagaio -->
</g>

No entanto, se você quiser um elemento para girar em torno de seu centro, você provavelmente
preferiria especificar o centro como 50% 50% como você faria em CSS; Mas infelizmente fazer isso
dentro da função "rotate ()" não é possível - você precisa usar coordenadas absolutas. No entanto, você
pode fazer isso usando a propriedade CSS "transform-origin" em conjunto com a propriedade CSS
"transform". Mais sobre isso mais adiante no artigo.

Transformações do sistema de coordenadas

Agora que cobrimos todas as possíveis funções de transformação do SVG, vamos investigar a parte visual
e o efeito de aplicar cada transformação a um elemento SVG. Este é o aspecto mais importante das
transformações SVG. E eles são chamados de "transformações de sistemas de coordenadas" e não apenas
"transformações de elementos" por uma razão.
Na especificação, o atributo "transform" é definido como sendo um dos dois atributos que estabelecem
um novo espaço de usuário (sistema de coordenadas atual) no elemento ao qual ele é aplicado - o
atributo "viewBox" é o segundo dos dois atributos que criam um novo espaço de usuário. Então o que
exatamente isso significa?

O atributo "transform" estabelece um novo espaço de usuário (sistema de coordenadas atual) no

elemento ao qual ele é aplicado.

Esse comportamento é semelhante ao comportamento das transformações de CSS aplicadas a um

elemento HTML - o sistema de coordenadas do elemento HTML é transformado, e isso geralmente é
mais óbvio quando você está encadeando transformações (chegaremos a isso mais tarde). Apesar de
serem semelhantes em muitos aspectos, as transformações HTML e SVG têm algumas diferenças.

A principal diferença é o sistema de coordenadas. O sistema de coordenadas de um elemento HTML é

estabelecido no próprio elemento. Enquanto isso, em SVG, o sistema de coordenadas de um elemento
é, inicialmente, o sistema de coordenadas atual ou o espaço do usuário em uso.

Quando você aplica o atributo transform a um elemento SVG, esse elemento obtém uma "cópia" do
sistema de coordenadas do usuário atual em uso. Você pode pensar nisso apenas criando uma nova
"camada" para o elemento transformado, onde a nova camada tem sua própria cópia do sistema de
coordenadas do usuário atual (a caixa de visão).

Em seguida, o novo sistema de coordenadas atual do elemento é transformado pelas funções de

transformação especificadas dentro do atributo "transform", resultando assim na transformação do
próprio elemento. É como se os elementos fossem desenhados na tela no sistema de coordenadas
transformado.

Para entender como as transformações SVG são aplicadas, vamos começar com a parte visual. A imagem
a seguir mostra a tela SVG com a qual estamos trabalhando.

O papagaio e o cão são os elementos (grupos <g>) que nós estamos tranformando.
<svg width="800" height="800" viewBox="0 0 800 600">
<g id="parrot">
<!-- elementos que formam o papagaio -->
</g>
<g id="dog">
<!-- elementos que formam o cão -->
</g>
</svg>

O sistema de coordenadas cinza é o sistema de coordenadas inicial da tela estabelecido pela viewBox.
Por motivos de simplicidade, não vou alterar o sistema de coordenadas inicial - estou usando uma
viewBox do mesmo tamanho da viewport, como você vê no código acima.

Quando você aplica o atributo "transform" a um elemento SVG, esse elemento obtém uma "cópia" do
sistema de coordenadas do usuário atual em uso.
Agora que estabelecemos nossa tela e um espaço inicial do usuário, vamos começar a transformar
elementos. Vamos começar por transladar o papagaio em 150 unidades para a esquerda e 200 unidades
para baixo.

O papagaio é, naturalmente, feito de vários caminhos e formas. É suficiente aplicar o atributo transform
ao grupo que envolve essas formas <g>; Isto por sua vez aplicará a transformação a todo o conjunto de
formas e caminhos, e o papagaio será transladado como um item inteiro.

<svg width="800" height="800" viewBox="0 0 800 600">

<g id="parrot" transform="translate(150 200)">
<!-- elementos que formam o papagaio -->
</g>
<!-- ... -->
</svg>

A imagem a seguir mostra o resultado do translado do papagaio pela função "translate()" acima. A
versão translúcida do papagaio mostra a posição inicial antes da transformação ser aplicada.
A transformação "translate" em SVG é tão simples e direta quanto no CSS, quando aplicada em um
elemento HTML. Mencionamos anteriormente que a aplicação do atributo "transform" a um elemento
estabelece um novo sistema de coordenadas de usuário atual nele. A imagem a seguir mostra a "cópia"
do sistema de coordenadas inicial, que é estabelecida no elemento papagaio quando ele foi
transformado. Observe como o sistema de coordenadas atual do papagaio é transladado.

É importante notar aqui que o novo sistema de coordenadas atual estabelecido no elemento é uma
réplica do espaço inicial do usuário, com a posição do elemento preservada dentro dele. Isso significa
que ele não é estabelecido na caixa delimitadora do elemento, nem é o tamanho do novo sistema de
coordenadas atual restrito ao tamanho do elemento. Aqui é onde a diferença entre o sistema de
coordenadas HTML e SVG aparece.

O novo sistema de coordenadas atual estabelecido em um elemento transformado não é estabelecido na

caixa delimitadora do elemento, nem seu tamanho é limitado ao tamanho do elemento.

Isto é mais evidente se quisermos transformar o cão na parte inferior direita da tela. Suponha que
queremos transladar o cão por 50 unidades para a direita e, em seguida, 50 unidades para baixo. Esta é a
forma como o cão, a sua posição inicial, e o novo sistema de coordenadas atual (que também é
transladado com o cão) vai aparecer. Observe como a origem do novo sistema de coordenadas atual do
cão não está posicionada no canto superior esquerdo da caixa delimitadora do cão. Observe também
como o cão e seu novo sistema de coordenadas parecem ter sido movidos para uma nova "camada" no
topo da tela.
Agora vamos tentar outra coisa. Em vez de transladar o papagaio, vamos tentar escalá-lo. Nós vamos
escalar o papagaio para dobrar seu tamanho:

<svg width="800" height="800" viewBox="0 0 800 600">

<g id="parrot" transform="scale(2)">
<!-- elementos que formam o papagaio-->
</g>
<!-- ... -->
</svg>

O resultado de dimensionar um elemento SVG difere do dimensionamento de um elemento HTML. A

posição do elemento SVG dimensionado muda dentro da viewport quando ela é dimensionada. A
imagem a seguir mostra o resultado de dobrar o tamanho do papagaio. Observe a posição e tamanho
iniciais e finais.

O que podemos notar a partir da imagem acima é que não só o tamanho (largura e altura) do papagaio
foram dobradas, mas as coordenadas (x e y) também foram multiplicadas pelo fator de escala (que é
dois, neste caso).

A razão pela qual acabamos com esse resultado é algo que mencionamos anteriormente: o sistema de
coordenadas atual do elemento é transformado e, em seguida, o papagaio é atraído para o novo sistema.
Assim, neste exemplo, o sistema de coordenadas atual foi escalado. Este efeito é semelhante ao efeito de
usar viewBox = "0 0 400 300", que provoca "zooms in" para o sistema de coordenadas, assim dobrando
o tamanho do conteúdo dentro dele.

Então, se visualizássemos a transformação do sistema de coordenadas mostrando o atual sistema

transformado do papagaio, teríamos o seguinte resultado:
O novo sistema de coordenadas atual do papagaio é ampliado, dando um "zooming in" para o papagaio
ao mesmo tempo. Observe que, dentro de seu sistema de coordenadas atual, o papagaio não é
reposicionado - é apenas o efeito de escalonar o sistema de coordenadas que o reposiciona dentro da
viewport. O papagaio é simplesmente desenhado em suas coordenadas x e y originais dentro do novo
sistema ampliado.

Vamos tentar escalar o papagaio em ambas as direções usando diferentes fatores de escala. Se escalarmos
o papagaio aplicando transform = "scale (2 0,5), estamos dobrando sua largura enquanto fazemos a
metade de sua altura original.O efeito será semelhante à aplicação de viewBox =" 0 0 400 1200 ".

Observe a posição do papagaio dentro do sistema de coordenadas escalonado e compare-o com a

posição no sistema inicial (papagaio translúcido): as coordenadas de posição x e y são preservadas.

Inclinar um elemento em SVG também resulta no elemento sendo "movido" como resultado do seu
sistema de coordenadas atual sendo distorcido.
Suponha que apliquemos uma transformação de inclinação para o cão ao longo do eixo x usando a
função skewX. Vamos inclinar o cão em 25 graus na horizontal.

<svg width="800" height="800" viewBox="0 0 800 600">

<!-- ... -->
<g id="dog" transform="skewX(25)">
 <!-- elementos que formam o desenho do cão -->
</g>
</svg>

A imagem a seguir mostra o resultado da aplicação da transformação de inclinação para o cão. Seu
sistema de coordenadas é distorcido, e assim é o próprio cão.

Observe que a posição do cão em relação à sua posição original também muda, como resultado da
inclinação do seu sistema de coordenadas.

A imagem a seguir mostra o resultado de enviesar o cão pelo mesmo ângulo usando skewY () em vez de
skewX:

E por último mas não menos importante, vamos tentar girar o papagaio. O centro de rotação padrão é o
canto superior esquerdo do sistema de coordenadas do usuário atual. O novo sistema atual estabelecido
no elemento girado também será rodado. No exemplo a seguir, vamos girar o papagaio em 45 graus. O
sentido de rotação positivo é no sentido horário.
Você provavelmente vai querer girar um elemento em torno de um ponto diferente da origem padrão do
sistema de coordenadas. Usando a função "rotate ()" no atributo "transform", você pode especificar esse
ponto explicitamente. Suponha que queremos girar o papagaio neste exemplo em torno de seu próprio
centro. De acordo com a largura, a altura e a posição do papagaio, posso determinar seu centro para
estar em aproximadamente (150, 170). O papagaio pode então ser girado em torno deste ponto:

<svg width="800" height="800" viewBox="0 0 800 600">

<g id="parrot" transform="rotate(45 150 170)">
<!-- elementos que formam o desenho do papagaio -->
</g>
<!-- ... -->
</svg>
Neste ponto, o papagaio é girado e ficará assim:

Dissemos que as transformações são aplicadas ao sistema de coordenadas, e por isso, o elemento é
eventualmente afetado e transformado. Então, como exatamente a mudança do centro de rotação
funciona no sistema de coordenadas cuja origem está no ponto (0, 0)?

Quando você altera o centro ou a rotação, o sistema de coordenadas é convertido, girado pelo ângulo
especificado e, em seguida, convertido novamente por valores específicos, dependendo do centro de
rotação que você especificar. Neste exemplo, este:

<g id="parrot" transform="rotate(45 150 170)">

É realizado pelo navegador como uma série de operações de translação e rotação equivalente a:

<g id="parrot" transform="translate(150 170) rotate(45) translate(-150 -170)">

O atual sistema de coordenadas é transladado para o ponto que você quer que seja o centro. É então
rodado pelo ângulo que você especificar. E, finalmente, o sistema é transladado pela negação dos valores.
A transformação acima aplicada no sistema se parece com isto:

Antes de passarmos para a próxima seção onde vamos aninhar e transformar em cadeia, eu quero fazer
notar que o atual sistema de coordenadas de usuário estabelecido em um elemento transformado é
independente de outros sistemas de coordenadas estabelecidos em outros elementos transformados. A
imagem a seguir mostra os dois sistemas de coordenadas estabelecidos no cão e no papagaio, e como eles
são independentes uns dos outros.

Observe também que cada sistema de coordenadas atual ainda está dentro do sistema de coordenadas
principal da tela estabelecida usando o atributo viewBox no container <svg>. Quaisquer transformações
aplicadas à viewBox afetarão toda a tela e todos os elementos dentro dela também, independentemente
de terem seus próprios sistemas de coordenadas estabelecidos ou não.
Por exemplo, o seguinte é o resultado de alterar o espaço do usuário de toda a tela de viewBox = "0 0
800 600" para viewBox = "0 0 600 450". Toda a tela é ampliada, preservando quaisquer transformações
aplicadas aos elementos individuais.

Transformações encadeadas e aninhadas

Muitas vezes você pode querer aplicar várias transformações a um elemento. Aplicar transformações
múltiplas em um raw é o que é referido como "encadeamento" de transformações.

Quando as transformações são encadeadas, a coisa mais importante a ser percebida é que, assim como
com transformações de elementos HTML, cada transformação é aplicada ao sistema de coordenadas
depois que esse sistema é transformado pelas transformações anteriores.

Por exemplo, se você estiver indo para aplicar uma rotação para um elemento, seguido por uma
translação, a translação acontece de acordo com o novo sistema de coordenadas, e não o inicial não
girado.

O exemplo a seguir faz exatamente isso. Nós estamos aplicando a rotação anterior, e então traduzindo o
papagaio usando por 200 unidades ao longo da transformação positiva do eixo (x) transform = "rotate
(45 150 170) translate (200)".

Dependendo da posição final e da transformação que você procura, você precisa encadear suas
transformações de acordo. Mantenha sempre o sistema de coordenadas em mente.

Observe que quando você inclinar um elemento - e seu sistema de coordenadas com ele - o sistema de
coordenadas não será mais um ortogonal, e as coordenadas não serão mais calculadas como ortogonais -
elas serão coordenadas oblíquas. Simplificando, isso significa apenas que a origem do sistema de
coordenadas não é mais um ângulo de 90 graus, e, portanto, as novas coordenadas serão calculadas com
base neste novo ângulo.

As transformações aninhadas ocorrem quando um "filho" de um elemento transformado também é

transformado. A transformação aplicada ao elemento "filho" será um acúmulo das transformações
aplicadas sobre seus antepassados e a transformação aplicada sobre ele.

Assim, na verdade, as transformações de assentamento são semelhantes às de encadeamento; A única

diferença é que, em vez de aplicar uma série de transformações em um elemento, ele automaticamente
recebe as transformações aplicadas em seus adeptos e, finalmente, suas transformações são aplicadas a
ele, assim como aplicamos transformações na cadeia acima uma após a outra .

Isso é particularmente útil quando você deseja transformar um elemento em relação a outro. Por
exemplo, suponha que você deseja animar a cauda do cão. A cauda é um descendente do grupo #dog.

<svg width="800" height="800" viewBox="0 0 800 600">

<!-- ... -->
<g id="dog" transform="translate(..)">
<!-- elementos que formam o desenho do cão -->
<g id="head">
<!-- .. -->
</g>
<g id="body" transform="rotate(.. .. ..)">
<path id="tail" d="..." transform="rotate(..)">

</path>
<g id="legs">
<!-- ... -->
</g>
</g>
</g>
</svg>

Suponhamos que queremos transladar o grupo de cães; Em seguida, girar seu corpo por algum ângulo
em torno de algum ponto e, em então, queremos animar a cauda por rotação.

Quando a cauda deve ser rodada, ela "herda" o sistema de coordenadas transformado de seu antepassado
(#body), que por sua vez herda o sistema de coordenadas transformado de seu antepassado
transformado (#dog) também. Então, na verdade, quando o taill é girado, é como se tivesse sido
transladado (pela mesma tradução do grupo #dog), então girado (pela mesma rotação do grupo #body)
e, em seguida, girado por sua própria rotação. E o efeito de aplicar uma série de transformações aqui é o
mesmo que explicamos no exemplo do encadeamento acima.
Então, você vê, as transformações de encadeamento tem praticamente o mesmo efeito que acorrentá-los
no #tail.

Transformando SVGs usando Propriedades CSS

Em SVG 2, o atributo "transform" é referido como a propriedade "transform"; Isso ocorre porque as
transformações SVG foram "exportadas" para a especificação CSS3 "transforms". Este último combina
as especificações de transformações SVG, transformações CSS 2D e transformações CSS 3D, e
apresenta características como "transform-origin" e transformações 3D em SVG.

As propriedades de transformação CSS especificadas nas especificações "CSS Transforms" podem ser
aplicadas a elementos SVG. No entanto, os valores das funções de propriedade de transformação
precisam seguir a sintaxe especificada na especificação CSS: os argumentos de função devem ser
separados por vírgulas – "espaço de separação" sozinho não é válido, mas você pode incluir um ou mais
espaço em branco antes e / ou após a vírgula; E a função "rotate ()" não toma mais valores de <cx> <cy>
- o centro de rotação é especificado usando a propriedade "transform-origin". Além disso, as funções de
transformação CSS aceitam unidades para ângulos e coordenadas, como rad (radians) para ângulos
(entre outros) e px, em, etc. para valores de coordenadas.

Um exemplo de rotação de um elemento SVG usando CSS pode parecer com o seguinte:

#parrot {
transform-origin: 50% 50%; /* Centro de rotação é definido como centro do elemento */
transform: rotate(45deg);
}

O elemento SVG também pode ser transformado em espaço tridimensional usando "transform CSS
3D". Note-se que os sistemas de coordenadas ainda são, no entanto, diferentes dos sistemas de
coordenadas estabelecidos em elementos HTML. Isso significa que as rotações 3D também serão
diferentes, a menos que você altere o centro de rotação.

#SVGel {
transform: perspective(800px) rotate3d (1, 1, 0, 45deg);
}

Transformar elementos SVG com CSS é praticamente o mesmo que transformar elementos HTML
com CSS. Dito isso, no momento da redação deste artigo, as implementações ainda estão incompletas
em alguns navegadores e em alguns recursos. Devido à rapidez com que o navegador muda, eu
recomendo que você experimente as propriedades para determinar o que funciona atualmente e o que
não funciona, e decidir sobre o que você pode ou não começar a usar hoje.

Observe que, uma vez que as transformações CSS são totalmente implementadas para elementos SVG, é
recomendável que você use a sintaxe de função "CSS transform" mesmo quando você aplica a
transformação na forma de um atributo de transformação. Dito isto, a sintaxe acima mencionada das
funções de atributo de transformação ainda será válida.
Animando as transformações

As transformações SVG podem ser animadas, assim como as transformações CSS . Se você estiver
usando a propriedade de transformação CSS para transformar o SVG, você pode animar a
transformação usando animações CSS e transições assim como você animaria transformações CSS em
elementos HTML.

O atributo de transformação SVG pode ser animado usando o elemento SVG <animateTransform>. O
elemento <animateTransform> é um dos três elementos em SVG que são usados para animar atributos
SVG diferentes.

Detalhes do elemento <animateTransform> estão fora do escopo deste artigo. Fique atento para um
artigo que vou escrever sobre os diferentes elementos de animação SVG, incluindo
<animateTransform>.