A Guide to SVG Animations (SMIL)

by Sara Soueidan

Viso geral

Os grficos SVG podem ser animados usando elementos de animao. Os elementos de animao foram
inicialmente definidos na especificao SMIL Animation (Synchronized Multimedia Integration
Language); Esses elementos incluem:

<Animate> - permite animar os atributos e propriedades escalares ao longo de um perodo de tempo.

<Set> - uma abreviatura conveniente para animar, o que til para atribuir valores de animao a
atributos e propriedades no-numricos, como a propriedade de visibilidade.

<AnimateMotion> - move um elemento ao longo de um caminho de movimento.

<AnimateColor> - modifica o valor de cor de determinados atributos ou propriedades ao longo do

tempo. Observe que o elemento <animateColor> foi reprovado em favor de simplesmente usar o
elemento <animate> para direcionar as propriedades que podem tomar valores de cor. Mesmo que ainda
esteja presente na especificao SVG 1.1, claramente observado que foi obsoleto; E foi completamente
removido da especificao SVG 2.

Alm dos elementos de animao definidos na especificao SMIL, o SVG inclui extenses compatveis
com as especificaes de animao SMIL; Essas extenses incluem atributos que estendem a
funcionalidade do elemento <animateMotion> e elementos de animao adicionais. As extenses SVG
incluem:

<AnimateTransform> - permite animar um dos atributos de transformao do SVG ao longo do tempo,

como o atributo transform.

Path (atributo) - permite que qualquer recurso da sintaxe de dados do caminho do SVG seja
especificado em um atributo "path" para o elemento animateMotion (SMIL Animation s permite um
subconjunto da sintaxe de dados do caminho do SVG dentro de um atributo path). Falaremos mais
sobre animateMotion em uma prxima seo.

<Mpath> - usado em conjunto com o elemento <animateMotion> para fazer referncia a um caminho
que deve ser usado como um caminho para o movimento. O elemento <mpath> includo dentro do
elemento <animateMotion>, antes da tag de fechamento.

Keypoints (atributo) - usado como um atributo para <animateMotion> para fornecer controle preciso
das animaes de velocidade de movimento.

Rotate (atributo) - usado como um atributo para <animateMotion> para controlar se um objeto
girado automaticamente de modo que seu eixo x aponte na mesma direo (ou direo oposta) que o
vetor tangente direcional do caminho de movimento. Esse atributo a chave para fazer o movimento ao
longo de um caminho funcionar como seria de esperar. Mais sobre isso na seo animateMotion.
Animaes SVG podem ser semelhantes s animaes e transies CSS por sua natureza. Os quadros-
chave so criados, as coisas se movem, as cores mudam, etc. No entanto, eles podem fazer algo que as
animaes CSS no podem fazer, vamos descobrir.

Por que usar animaes SVG?

SVGs podem ser estilizados e animados com CSS (slides). Basicamente, qualquer transformao ou
animao de transio que pode ser aplicada a um elemento HTML tambm pode ser aplicada a um
elemento SVG. Mas existem algumas propriedades SVG que no podem ser animadas atravs de CSS,
apenas atravs de SVG. Um caminho SVG, por exemplo, vem com um conjunto de dados (um atributo
d = "") que define a forma desse caminho. Estes dados podem ser modificados e animados atravs de
SMIL, mas no atravs de CSS. Isso ocorre porque os elementos SVG so descritos por um conjunto de
atributos conhecidos como "atributos de apresentao SVG". Alguns desses atributos podem ser
definidos, modificados e animados usando CSS, outros no.

Assim, muitas animaes e efeitos podem simplesmente no ser alcanados usando CSS neste momento.
As lacunas de animao CSS SVG podem ser preenchidas usando JavaScript ou as animaes SVG
declarativas derivadas do SMIL.

Se voc preferir usar JavaScript, eu recomendo usar "snap.svg" por Dmitry Baranovsky, que descrito
como sendo "O jQuery do SVG". Ou se voc preferir uma abordagem de animao mais declarativa,
voc pode usar os elementos de animao SVG como abordaremos neste guia!

Outra vantagem do SMIL sobre as animaes do JS que as animaes do JS no funcionam quando o

SVG incorporado como um "img" ou usado como imagem de fundo no CSS. Animaes SMIL
funcionam em ambos os casos (ou devem, suporte de navegador pendente). Essa uma grande
vantagem, na minha opinio. Voc pode escolher SMIL por outras opes por causa disso. Este artigo
um guia para ajud-lo a comear a usar o SMIL hoje.

Suporte e Suportes do Navegador

Suporte de navegador para animaes SMIL bastante decente. Eles funcionam em todos os
navegadores, exceto no Internet Explorer e Opera Mini.

Se voc precisar fornecer um recurso alternativo para as animaes SMIL, voc pode testar o suporte
"on-the-fly "do navegador, usando o "Modernizr". Se o SMIL no suportado, voc pode fornecer
algum tipo de retorno (animaes em JavaScript, uma experincia alternativa, etc).

Especificando o destino da animao com <xlink: href>

No importa qual dos quatro elementos de animao voc escolheu, voc precisa especificar o destino da
animao definida por esse elemento.

Para especificar um destino, voc pode usar o atributo <xlink: href>. O atributo tem uma referncia
URI para o elemento que o alvo desta animao e que, portanto, ser modificado ao longo do tempo.
O elemento de destino deve fazer parte do fragmento de documento SVG atual.
<rect id="cool_shape" ... />
<animate xlink:href="#cool_shape" ... />

Se voc encontrou elementos de animao SVG antes, provavelmente j os viu aninhados dentro do
elemento que eles deveriam animar. Isso possvel, bem como por especificao:

Se o atributo <xlink: href> no for fornecido, o elemento de destino ser o elemento pai imediato do
elemento de animao atual.
<rect id="cool_shape" ... >
<animate ... />
</rect>

Portanto, se voc quiser "encapsular" a animao no elemento ao qual se aplica, voc pode fazer isso. E
se voc quiser manter as animaes separadas em outro lugar no documento, voc pode fazer isso
tambm e especificar o destino de cada animao usando <xlink: href>. Ambas as formas de trabalho so
boas.

Especificando a propriedade de destino da animao com <attributeName> e <attributeType>

Todos os elementos de animao tambm compartilham outro atributo: <attributeName>. O atributo

<attributeName> usado para especificar o nome do atributo que voc est animando.

Por exemplo, se voc quiser animar a posio do centro de um <circle> no eixo x, faa isso especificando
"cx" como o valor para o atributo "attributeName".

AttributeName leva apenas um valor, no uma lista de valores, portanto, voc s pode animar um
atributo de cada vez. Se voc quiser animar mais de um atributo, voc precisa definir mais de uma
animao para o elemento. Isso algo que eu gostaria de ver diferente, e que eu acho uma vantagem do
CSS sobre o SMIL. Mas, novamente, por causa dos valores possveis para outros atributos de animao
(que vamos abordar a seguir), s faz sentido definir apenas um nome de atributo de cada vez, caso
contrrio os outros valores de atributos podem se tornar muito complexos para trabalhar.

Quando voc especifica o nome do atributo, voc pode adicionar um prefixo XMLNS (abreviao de
namespace XML) para indicar o "namespace" do atributo. O namespace tambm pode ser especificado
usando o atributo <attributeType>. Por exemplo, alguns atributos fazem parte do namespace CSS (o
que significa que o atributo pode ser encontrado como uma propriedade CSS tambm) e outros so
XML somente.

Se o valor de attributeType no estiver definido explicitamente ou estiver definido como "auto", o

navegador deve pesquisar primeiro pela lista de propriedades CSS para um nome de propriedade
correspondente e, se nenhum for encontrado, procura o namespace XML padro para o elemento.

Por exemplo, o "snippet" a seguir anima a opacidade de um retngulo SVG. Uma vez que o atributo
<opacity> tambm est disponvel como uma propriedade CSS, o <attributeType> definido para o
namespace CSS:
<rect>
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

Examinaremos os outros atributos de animao nos prximos exemplos abaixo. Exceto onde indicado
de outra forma, todos os atributos de animao so comuns a todos os elementos de animao.

Animando o atributo de um elemento de um valor para outro durante uma durao de tempo e
especificando o estado final: from, by, to, dur e fill

Vamos comear movendo um crculo de uma posio para outra. Vamos fazer isso alterando o valor de
seu atributo "cx" (que especifica a posio x de seu centro).

Vamos usar o elemento <animate> para fazer isso. Este elemento usado para animar um atributo de
cada vez. Os atributos que tomam valores numricos e cores geralmente so animados com <animate>.

Para alterar de um valor para outro durante um perodo de tempo, os atributos "from", "to" e "dur" so
usados. Alm destes, voc tambm vai querer especificar quando a animao deve comear, com o
atributo "begin".

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

<animate
xlink:href="#my-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />

No exemplo acima, definimos um crculo e, em seguida, chamamos uma animao nesse crculo. O
centro do crculo se move da posio inicial em 50 unidades, para 450 unidades ao longo do eixo x.

O valor de "begin" definido para "click". Isso significa que o crculo se mover quando ele for clicado.
Voc tambm pode definir esse valor como um valor de tempo. Por exemplo, begin = "0s" ir iniciar a
animao assim que a pgina for carregada. Voc pode atrasar uma animao definindo um valor de
tempo positivo. Por exemplo, begin = "2s" inicia a animao dois segundos aps a carga.

O que ainda mais interessante sobre "begin" que voc pode definir valores como "click + 1s" para
iniciar uma animao um segundo depois que o elemento clicado! Alm do mais, voc pode usar
outros valores que permitem sincronizar animaes sem ter que calcular a durao e os atrasos de outras
animaes. Mais sobre isso mais tarde.

O atributo "dur" semelhante ao equivalente de "animation-duration" em CSS.

Os atributos "from" e "to" so semelhantes aos quadros-chave "from" e "to" no bloco "@keyframe" da
animao em CSS:

@keyframes moveCircle {
from { /* valor inicial */ }
to { /* valor final */ }
}

O atributo "fill" (que infelizmente denominado como o atributo "fill" que define a cor de
preenchimento de um elemento) semelhante propriedade "animation-fill-mode", que especifica se o
elemento deve ou no retornar ao seu estado inicial aps o fim da animao. Os valores em SVG so
semelhantes aos do CSS, exceto por usar nomes diferentes:

Freeze: O efeito de animao definido para congelar o valor do efeito no ltimo valor da durao
ativa. O efeito de animao "congelado" para o restante da durao do documento (ou at que a
animao seja reiniciada).

Remover: O efeito de animao removido (no mais aplicado) quando a durao ativa da animao
tiver terminado. Aps a extremidade ativa da animao, a animao no afeta mais o alvo (a menos que
a animao seja reiniciada).

Tente alterar os valores na demonstrao ao vivo para ver como a animao afetada:

HTML
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze" />
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

O atributo "by" usado para especificar um deslocamento relativo para a animao. Como o nome
sugere, voc pode us-lo para especificar o valor pelo qual voc deseja que a animao progrida. O efeito
de "by" quase s visvel quando voc est progredindo sobre a durao da animao em etapas
discretas, semelhante maneira como ele funciona com a funo CSS "steps ()". O SVG equivalente
funo "steps ()" do CSS, "calcMode = discrete". Vamos chegar ao atributo "calcMode" mais tarde.
Outro caso em que o efeito de "by" mais bvio quando voc especifica apenas o atributo. Um
exemplo disso seria se voc us-lo com o elemento "set" que tambm cobriremos posteriormente.

E por ltimo mas no menos importante, "by" tambm vem a ser til quando voc est trabalhando
com animaes aditivas e acumulativas. Vamos discutir isso mais tarde no artigo.

Reiniciando animaes com "restart"

Pode ser til impedir que uma animao seja reiniciada enquanto ela estiver ativa. Para fazer isso, o SVG
oferece o atributo "restart". Voc pode definir este atributo como um dos trs valores possveis:

Always: A animao pode ser reiniciada a qualquer momento. Este o valor padro.

WhenNotActive: A animao s pode ser reiniciada quando no estiver ativa (ou seja, aps o fim ativo).
As tentativas de reiniciar a animao durante a sua durao ativa so ignoradas.

Never: O elemento no pode ser reiniciado para o restante da durao simples atual do continer tempo
pai. (No caso de SVG, uma vez que o continer de tempo pai o fragmento de documento SVG, a
animao no pode ser reiniciada para o restante da durao do documento).

Nomeando animaes e sincronizando-as

Suponha que queremos animar a posio e a cor do crculo, de modo que a mudana de cor acontea no
final da animao em movimento. Podemos fazer isso definindo o valor de incio da animao de
mudana de cor para ser igual durao da animao em movimento; Isto como ns faramos
normalmente em CSS.

SMIL, no entanto, tem um recurso de manipulao de eventos agradvel. Mencionamos anteriormente

que o atributo "begin" aceita valores como "click + 5s". Este valor chamado de "valor de evento" e,
neste caso, constitudo por uma referncia de evento seguida de um "valor de relgio". A parte
interessante aqui a nomeao da segunda parte: o "valor do relgio". Por que no simplesmente um
"valor de tempo"? Bem, a resposta que voc pode literalmente usar um valor de clock como "10min"
ou "01:33" que equivalente a "1 minuto e 33 segundos", ou mesmo "02:30:03" (duas horas, 30
minutos, e 3 segundos). No momento da redao deste artigo, os valores de clock no so totalmente
implementados em qualquer navegador.

Ento, se ns voltssemos para a demo anterior e usssemos o "click + 01:30", se um navegador tivesse
suporte, a animao dispararia 1 minuto e 30 segundos depois que o crculo for clicado.

Outro tipo de valor que pode aceitar o ID de outra animao seguido por uma referncia de evento. Se
voc tiver duas (ou mais) animaes (se elas so aplicadas ao mesmo elemento ou no!) E voc deseja
sincroniz-las para que uma delas comece em relao outra, voc pode fazer isso sem ter que saber a
durao da outra animao.

Por exemplo, na demo seguinte, o retngulo azul comea a se mover 1 segundo aps a animao do
crculo comear. Isso feito dando a cada animao um ID e, em seguida, usando esse ID como evento
"begin" como mostrado no cdigo a seguir:
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />

<svg width="500" height="350">

<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>

<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
fill="freeze"
id="circ-anim"/>

<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.begin + 1s"
fill="freeze"
id="rect-anim"/>

</svg>

O "begin = circ-anim.begin + 1s" a parte que diz ao navegador para iniciar a animao do retngulo 1
segundo aps o incio da animao do crculo.
Voc tambm pode iniciar a animao do retngulo depois que a animao do crculo terminar usando
o evento "end":

<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.end"
fill="freeze"
id="rect-anim"/>

Voc pode at inici-lo antes do final da animao do crculo:

<animate
xlink:href="#blue-rectangle"
 attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.end - 3s"
fill="freeze"
id="rect-anim"/>

Repetir animaes com "repeatCount"

Se voc quiser executar uma animao mais de uma vez, voc pode fazer isso usando o atributo
"repeatCount". Voc pode especificar o nmero de vezes que deseja repeti-lo, ou usar a palavra-chave
"indefinite" para que ela seja repetida indefinidamente. Ento, se repetimos a animao do crculo por
duas vezes, o cdigo ficaria assim:

<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
repeatCount="2"
fill="freeze"
id="circ-anim" />

Observe como a animao reiniciada a partir do valor inicial "from", em vez do valor que ele atingiu
no final da animao. Infelizmente, o SMIL no inclui uma maneira de ir e voltar entre os valores de
incio e fim como animaes CSS nos permitem fazer. No CSS, a propriedade "animation-direction"
especifica se uma animao deve ou no ser reproduzida em alguns ou em todos os ciclos ou iteraes.
"Animation-direction: alternate" significa que as iteraes de ciclo de animao, que so contagens
mpares, so reproduzidas na direo normal e as iteraes de ciclo de animao que so contagens pares
so reproduzidas em uma direo inversa. Isto significa que o primeiro ciclo vai jogar do incio ao fim,
ento o segundo ciclo vai jogar do final de volta para o incio, ento o terceiro ciclo vai jogar do incio
ao fim, e assim por diante.

No SMIL, para fazer isso voc teria que usar o JavaScript para modificar explicitamente os valores dos
atributos "from" e "to".

Outra soluo especificar o valor final como o valor mdio e, em seguida, ter o valor final ser o mesmo
que o valor inicial. Por exemplo, voc pode definir a animao para iniciar a partir de um valor "from",
e terminar no mesmo valor para "to", exceto que voc especifica o que voc teria definido como um
valor final, como um valor intermedirio entre "from" e "to".
Em CSS faramos algo assim:

@keyframes example {
from, to {
 left: 0;
}
50% {
left: 300px;
}
}

O equivalente em SMIL usar o atributo "values", que vamos explicar em breve.

Dito isto, a soluo acima pode ou no funcionar para voc, dependendo do tipo de animao que voc
est procurando, e se voc est encadeando animaes, repetindo-as ou fazendo animaes aditivas.

Est aqui uma animao infinita agradvel, simples usando alguns tempos atrasados do comeo por
Miles Elam:

HTML
<svg version="1.1" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#000"
stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="r1">
<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17
30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin"/>
</path>
<path id="r2">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17
30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+1s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin+1s"/>
</path>
<path id="r3">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17
30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+2s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin+2s"/>
</path>
<path id="r4">
<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17
30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite"
begin="p1.begin+3s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin+3s"/>
</path>
<path id="r5">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17
30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+4s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin+4s"/>
</path>
<path id="r6">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17
30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+5s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite"
begin="p1.begin+5s"/>
</path>
</defs>
<use xlink:href="#r1"/>
<use xlink:href="#r1" transform="rotate(60 160 160)"/>
<use xlink:href="#r1" transform="rotate(120 160 160)"/>
<use xlink:href="#r1" transform="rotate(180 160 160)"/>
<use xlink:href="#r1" transform="rotate(240 160 160)"/>
<use xlink:href="#r1" transform="rotate(300 160 160)"/>
<use xlink:href="#r2" transform="rotate(30 160 160)"/>
<use xlink:href="#r2" transform="rotate(90 160 160)"/>
<use xlink:href="#r2" transform="rotate(150 160 160)"/>
<use xlink:href="#r2" transform="rotate(210 160 160)"/>
<use xlink:href="#r2" transform="rotate(270 160 160)"/>
<use xlink:href="#r2" transform="rotate(330 160 160)"/>
<use xlink:href="#r3"/>
<use xlink:href="#r3" transform="rotate(60 160 160)"/>
<use xlink:href="#r3" transform="rotate(120 160 160)"/>
<use xlink:href="#r3" transform="rotate(180 160 160)"/>
<use xlink:href="#r3" transform="rotate(240 160 160)"/>
<use xlink:href="#r3" transform="rotate(300 160 160)"/>
<use xlink:href="#r4" transform="rotate(30 160 160)"/>
<use xlink:href="#r4" transform="rotate(90 160 160)"/>
<use xlink:href="#r4" transform="rotate(150 160 160)"/>
<use xlink:href="#r4" transform="rotate(210 160 160)"/>
<use xlink:href="#r4" transform="rotate(270 160 160)"/>
<use xlink:href="#r4" transform="rotate(330 160 160)"/>
<use xlink:href="#r5"/>
<use xlink:href="#r5" transform="rotate(60 160 160)"/>
<use xlink:href="#r5" transform="rotate(120 160 160)"/>
<use xlink:href="#r5" transform="rotate(180 160 160)"/>
<use xlink:href="#r5" transform="rotate(240 160 160)"/>
<use xlink:href="#r5" transform="rotate(300 160 160)"/>
<use xlink:href="#r6" transform="rotate(30 160 160)"/>
<use xlink:href="#r6" transform="rotate(90 160 160)"/>
<use xlink:href="#r6" transform="rotate(150 160 160)"/>
<use xlink:href="#r6" transform="rotate(210 160 160)"/>
<use xlink:href="#r6" transform="rotate(270 160 160)"/>
<use xlink:href="#r6" transform="rotate(330 160 160)"/> </svg>
Restringindo o tempo de repetio com "repeatDur"

Definir um elemento para repetir indefinidamente pode ficar irritante ou no "user-friendly" se a

animao retomada por um longo tempo. Assim, pode ser uma boa idia restringir o tempo de
repetio para um determinado perodo e parar a repetio aps algum tempo em relao ao incio do
documento. Isso conhecido como tempo de apresentao.

O tempo de apresentao indica a posio na linha do tempo em relao ao incio do documento de um

fragmento de documento determinado. especificado usando o atributo "repeatDur". Sua sintaxe
semelhante de um valor de "clock", mas em vez de ser relativa a outro evento de animao ou um
evento de interao, relativo ao incio do documento.

Por exemplo, o snippet a seguir interromper a repetio da animao 1 minuto e 30 segundos aps o
incio do documento:

<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="2s"
begin="0s"
repeatCount="indefinite"
repeatDur="01:30"
fill="freeze"
id="circ-anim" />

Sincronizando animaes com base no nmero de repeties

Agora vamos voltar um passo para o tpico de sincronizao entre duas animaes. De fato, no SMIL,
voc pode sincronizar animaes para que uma animao comece com base no nmero de repeties de
outra. Por exemplo, voc pode iniciar uma animao aps a "nth-repetition" de outro, mais ou menos
uma quantidade de tempo que voc pode querer adicionar.
O exemplo a seguir inicia a animao do retngulo na segunda repetio da animao do crculo:

<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.repeat(2)"
fill="freeze"
id="rect-anim" />
Controlando valores de keyframe de animao: keyTimes e valores

Em CSS, podemos especificar os valores que queremos que nossa propriedade animada leve em um
determinado quadro durante a animao. Por exemplo, se voc estiver animando o deslocamento para a
esquerda de um elemento, em vez de anim-lo de, digamos, 0 a 300 diretamente, voc pode anim-lo
para que ele tome certos valores durante certos quadros como este:

@keyframes example {
0% {
left: 0;
}
50% {
left: 320px;
}
80% {
left: 270px;
}
100% {
left: 300px;
}
}

O 0%, 20%, 80% e 100% so os quadros da animao, e os valores no bloco de cada quadro so os
valores para cada quadro. O efeito descrito acima de um elemento rebotando fora de uma parede,
ento de volta posio final.

No SMIL, voc pode controlar os valores por quadro de forma semelhante, mas a sintaxe bastante
diferente.

Para especificar os quadros-chave, use o atributo "keyTimes". E, em seguida, para especificar o valor da
propriedade animada para cada quadro, use os atributos de "values". As convenes de nomenclatura no
SMIL so bastante convenientes.

Se voltssemos ao nosso crculo em movimento e usssemos valores semelhantes aos dos quadros-chave
CSS acima, o cdigo ser semelhante ao seguinte:

<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="2s"
begin="click"
values="50; 490; 350; 450"
keyTimes="0; 0.5; 0.8; 1"
fill="freeze"
id="circ-anim" />
Ento, o que fizemos l?

A primeira coisa a notar aqui que os tempos de keyframe e os valores intermedirios so especificados
como listas. O atributo "keyTimes" uma lista separada por ponto e vrgula de valores de tempo usados
para controlar a estimulao da animao. Cada vez na lista corresponde a um valor na lista de atributos
de "values" e define quando o valor usado na funo de animao. Cada valor de tempo na lista
"keyTimes" especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um
deslocamento proporcional na durao simples do elemento de animao. Assim, os keytimes so
semelhantes aos do CSS, exceto que, em vez de especific-los como porcentagens, voc especifica-os
como uma frao.

Observe que se uma lista de valores for usada, a animao aplicar os valores em ordem ao longo da
animao. Se uma lista de valores especificada, quaisquer valores de atributos "from" e "to" so
ignorados.

Neste ponto, tambm vale a pena mencionar que voc pode usar o atributo "values" sem o atributo
"keyTimes" - os valores sero automaticamente espalhados uniformemente pelo tempo (para cada valor
"calcMode" diferente de estimulado (veja a prxima seo).

Controlando o ritmo da animao com a facilidade personalizada: calcMode e keySplines

Eu estou fazendo uma comparao CSS-SMIL novamente porque a sintaxe SMIL e conceitos ser
muito mais simples de entender se voc j est familiarizado com animaes CSS.

Em CSS, voc pode optar por alterar o ritmo padro de animao e especificar uma funo de
atenuao personalizada que controla a animao, usando a propriedade "animation-timing-function".
A funo de temporizao pode ser uma das poucas palavras-chave predefinidas, ou uma funo de
"cubic bezir".

No SMIL, o ritmo da animao especificado usando o atributo "calcMode". O ritmo de animao

padro "linear" para todos os elementos de animao, exceto "animateMotion" (vamos chegar a ele
mais tarde no artigo). Alm do valor "linear", voc pode definir o valor como: "discrete", "paced" ou
"spline".

"Discrete" especifica que a funo de animao ir saltar de um valor para o prximo sem qualquer
interpolao. Isso semelhante funo "steps ()" em CSS.

"Paced" semelhante ao linear, exceto que ele ir ignorar quaisquer tempos de progresso intermedirios
definidos por "keyTimes". Calcula a distncia entre os valores subsequentes e divide o tempo em
conformidade. Se seus valores esto todos em uma ordem linear, voc no notar a diferena. Mas se eles
vo para frente e para trs, ou se so cores (que so tratadas como valores vetoriais tridimensionais), voc
vai ver os valores intermedirios. O seguinte uma demonstrao ao vivo cortesia de Amelia Bellamy-
Royds, que mostra a diferena entre os trs valores calcMode mencionados at agora:

<svg width="100%" height="100%" viewBox="0 0 600 600" preserveAspectRatio="xMidYMin meet">

<g id="graphics" font-size="30">
<rect width="100%" height="100%" fill="lightyellow"/>
 <g>
<circle cx="50" cy="100" r="100" fill="gray">
<animate attributeName="cx" attributeType="XML"
begin="0;graphics.click"
values="50;500;300;400;50"
dur="20s"
calcMode="linear" />
<animate attributeName="fill" attributeType="XML"
begin="0;graphics.click"
dur="20s"
values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
calcMode="linear" />
</circle>
<text x="50" y="100">linear</text>
</g>
<g>
<circle cx="50" cy="300" r="100" fill="gray">
<animate attributeName="cx" attributeType="XML"
begin="0;graphics.click"
values="50;500;300;400;50"
dur="20s"
calcMode="paced"/>
<animate attributeName="fill" attributeType="XML"
begin="0;graphics.click"
dur="20s"
values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
calcMode="paced" />
</circle>
<text x="50" y="300">paced</text>
</g>
<g>
<circle cx="50" cy="500" r="100" fill="gray">
<animate attributeName="cx" attributeType="XML"
begin="0;graphics.click"
values="50;500;300;400;50"
dur="20s"
calcMode="discrete" />
<animate attributeName="fill" attributeType="XML"
begin="0;graphics.click"
dur="20s"
values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
calcMode="discrete" />
</circle>
<text x="50" y="500">discrete</text>
</g>
</g>
</svg>
O quarto valor aceito pelo "calcMode" "spline". Ele interpola de um valor na lista de valores para o
prximo de acordo com uma funo de tempo definida por uma spline "cubic bezier". Os pontos da
spline so definidos no atributo "keyTimes" e os pontos de controle para cada intervalo so definidos no
atributo "keySplines".

Voc provavelmente j notou o novo atributo na ltima frase: o atributo "keySplines". Ento, o que o
atributo keySplines faz?

Novamente, para os equivalentes CSS.

No CSS, voc pode especificar o ritmo da animao dentro de cada quadro-chave, em vez de especificar
um ritmo de animao para toda a animao. Isso lhe d melhor controle sobre como cada quadro-
chave da animao de deve prosseguir. Um exemplo usando esta caracterstica criar um efeito de bola
de salto. Os quadros-chave para isso podem ter esta aparncia:

@keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
15% {
top: 200px;
animation-timing-function: ease-out;
}
30% {
top: 70px;
animation-timing-function: ease-in;
}
45% {
top: 200px;
animation-timing-function: ease-out;
}
60% {
top: 120px;
animation-timing-function: ease-in;
}
75% {
top: 200px;
animation-timing-function: ease-out;
}
90% {
top: 170px;
animation-timing-function: ease-in;
}
100% {
top: 200px;
animation-timing-function: ease-out; } }
Em vez de funes com as palavras-chave"easing", poderamos ter usado as funes cbicas
correspondentes:
ease-in = cubic-bezier(0.47, 0, 0.745, 0.715)
ease-out = cubic-bezier(0.39, 0.575, 0.565, 1)

Vamos comear especificando os tempos-chave e a lista de valores para que o nosso crculo laranja sofra
o mesmo efeito de salto:
<animate
xlink:href="#orange-circle"
attributeName="cy"
from="50"
to="250"
dur="3s"
begin="click"
values="50; 250; 120;250; 170; 250; 210; 250"
keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
fill="freeze"
id="circ-anim" />

A animao ser iniciada com o clique e congelar quando atingir o valor final. Em seguida, para
especificar o ritmo de cada quadro-chave, vamos adicionar o atributo "keySplines".

O atributo "keySplines" recebe um conjunto de pontos de controle bezier associados lista "keyTimes",
definindo uma funo bezier cbica que controla a estimulao de intervalos. O valor do atributo uma
lista de pontos de controles separada por ponto-e-vrgula. Cada descrio de ponto de controle um
conjunto de quatro valores: x1 y1 x2 y2, descrevendo os pontos de controle bezier para um segmento de
tempo. Os valores devem estar todos no intervalo de 0 a 1 e o atributo ignorado, a menos que o
"calcMode" esteja definido como "spline".

Em vez de tomar funes cbicas-bezier como valores, "keySplines" toma as coordenadas dos dois
pontos de controle que so usados para desenhar a curva. Os pontos de controle podem ser vistos na
seguinte captura de tela da ferramenta de Lea. A captura de tela tambm mostra as coordenadas de cada
ponto, cada um colorido com a mesma cor do ponto em si. Para o atributo "keySplines", so esses
valores que vamos usar para definir o ritmo das animaes dos quadros-chave.

SMIL permite que esses valores sejam separados por vrgulas com espao em branco opcional ou por
espao em branco sozinho. Os valores "keyTimes" que definem o segmento associado so os "pontos
ncora" do bezier e os valores "keySplines" so os pontos de controle. Assim, deve haver um conjunto
menor de pontos de controle do que existem "keyTimes".
Ento, para traduzir isso para o elemento de animao SVG, temos o seguinte cdigo:
<animate
xlink:href="#orange-circle"
attributeName="cy"
from="50"
to="250"
dur="3s"
begin="click"
values="50; 250; 120;250; 170; 250; 210; 250"
keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
keySplines=".42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;
.42 0 1 1;
0 0 .59 1;"
fill="freeze"
id="circ-anim"/>

Se voc deseja especificar apenas uma funo "easing" para toda a animao sem valores intermedirios,
voc ainda precisar especificar os quadros-chave usando o atributo "keyTimes", mas voc especificaria
apenas os quadros-chave de incio e trmino, ou seja, 0; 1, e nenhum valor intermedirio.

Animaes Aditivas e Acumulativas: additive e accumulate

s vezes, til definir uma animao que comea a partir de onde a animao anterior terminou; Ou
uma que use a soma acumulada das animaes anteriores como um valor para prosseguir. Para isso,
SVG tem dois atributos convenientemente nomeados: "additive" e "accumulate".

Suponha que voc tenha um elemento cuja largura queira "crescer", ou uma linha cujo comprimento
voc deseja aumentar, ou um elemento que voc deseja mover passo a passo de uma posio para a
outra, em etapas separadas. Este recurso particularmente til para animaes repetidas.
Como qualquer outra animao, voc vai especificar os valores "from" e "to". No entanto, quando voc
definir um aditivo (additive) para somar (sum), cada um dos seus valores vai ser relativo ao valor
original do atributo animado.

Ento, de volta ao nosso crculo. Para o nosso crculo, a posio inicial de "cx" 50. Quando voc
define from = "0" to = "100", o zero se realmente o original 50, e o 100 realmente 50 + 100; Em
outras palavras, praticamente semelhante a "from =" 50 "to =" 150 "".

Ao fazer isso, obtemos o seguinte resultado:

HTML
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="0"
to="100"
additive="sum"
repeatCount="3"
calcMode="spline"
keyTimes="0;1"
keySplines=".42 0 1 1"
dur="1s"
begin="click"
fill="freeze" />
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Isso tudo o que o atributo "additive" faz. Ele apenas especifica se os valores "from" e "to" devem ser
relativos ao valor atual ou no. O atributo s tem um dos dois valores: soma (sum) e substituir (replace).
O ltimo o valor padro e basicamente significa que os valores "from" e "to" vo substituir os valores
atuais/originais, o que pode acabar causando um estranho salto antes que a animao comece.

No entanto, como faremos se o que queremos que os valores sejam adicionados de tal forma que a
segunda repetio comece a partir do valor final da anterior? Este o lugar onde o atributo de
"accumulate" entra.

O atributo "accumulate" controla se a animao ou no cumulativa. O valor padro "none", o que

significa que, quando a animao repetida por exemplo, ela vai comear de volta desde o incio. No
entanto, voc pode defini-lo como soma (sum), que especifica que cada iterao de repetio aps a
primeira, baseia-se no ltimo valor da iterao anterior.

Ento, se voltssemos animao anterior e especificssemos accumulate = "sum", teramos o seguinte

resultado:

HTML
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="0"
to="100"
additive="sum"
accumulate="sum"
repeatCount="3"
calcMode="spline"
keyTimes="0;1"
keySplines=".42 0 1 1"
dur="1s"
begin="click"
fill="freeze" />
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Observe que o atributo "accumulate" ignorado se o valor do atributo de destino no suporta adio ou
se o elemento de animao no for repetido. Ele tambm ser ignorado se a funo de animao for
especificada somente com o atributo "to".
Especificando a hora final de uma animao com "end"

Alm de especificar quando uma animao comea, voc tambm pode especificar quando termina,
usando o atributo "end". Por exemplo, voc pode definir uma animao para repetir indefinidamente e,
em seguida, faze-la parar quando outro elemento comea a animar. O atributo "end" recebe valores
semelhantes aos que o valor "begin" assume. possvel especificar valores/deslocamentos de tempo
absolutos ou relativos, valores de repetio, valores de eventos, etc.
Por exemplo, na demo seguinte, o crculo laranja se move lentamente durante um perodo de 30
segundos para o outro lado da tela. O crculo verde tambm ser animado, mas somente quando ele for
clicado. A animao do crculo laranja terminar quando a animao do crculo verde comear. Clique
no crculo verde para ver o laranja parar:

HTML
<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<circle id="green-circle" r="30" cx="50" cy="150" fill="#009966" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="30s"
begin="0s"
end="gCircAnim.begin"
fill="freeze"
id="oCircAnim"/>
<animate
xlink:href="#green-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze"
id="gCircAnim"/>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

O mesmo tipo de sincronizao de animao pode ser alcanado para duas animaes aplicadas ao
mesmo elemento, claro. Por exemplo, suponha que definimos a cor do crculo para animar
indefinidamente alterando de um valor para outro. Ento, quando o elemento clicado, ele se move
para o outro lado. Vamos defini-lo agora para que a animao de cores pare assim que o elemento
clicado e a animao em movimento seja disparada.

HTML
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="#0099CC" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze"
id="move"/>
<animate
xlink:href="#orange-circle"
attributeName="fill"
from="#0099CC"
to="deepPink"
dur="5s"
repeatCount="indefinite"
begin="0s"
end="move.begin"
fill="freeze"
id="changeColor"/>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

Definindo intervalos de animao usando vrios valores de incio (begin) e fim (end)

De fato, ambos os atributos de "begin" e "end" aceitam uma lista de valores separados por ponto e
vrgula. Cada valor no atributo "begin" ir corresponder a um valor no atributo "end", formando assim
intervalos de animao ativos e inativos.

Voc pode pensar que isso semelhante a um carro em movimento, onde os pneus do carro esto ativos
e, em seguida, inativos por perodos de tempo, dependendo se o carro est se movendo ou no. Voc
pode at mesmo criar o efeito de carro animado aplicando animaes para o carro: uma que translada
(translate) o carro ou move-o ao longo de um caminho que tambm uma animao aditiva e
acumulativa, e outra que gira os pneus do carro em intervalos que seriam sincronizados com a translao
(translate).
Um exemplo que especifica mltiplos horrios de incio e trmino (ou seja, intervalos) o demo a
seguir, onde o retngulo girado com base nos intervalos definidos, mudando de ativo para inativo de
acordo.
HTML
<svg width="500" height="150">
<style>
rect {
-moz-transform-origin: 75px 75px;
transform-origin: 50% 50%;
}
</style>
<rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />
<animateTransform
xlink:href="#deepPink-rectangle"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 75 75"
to="360 75 75"
dur="2s"
begin="0s; 5s; 9s; 17s;"
end="2s; 8s; 15s; 25s;"
fill="freeze"
restart="whenNotActive"
/>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

Note que no exemplo acima eu usei o elemento <animateTransform> para girar o retngulo sobre o seu
centro. Falaremos sobre esse elemento mais detalhadamente em uma prxima seo abaixo.

Observe tambm que, mesmo se voc definir o "repeatCount" como "indefinite", ele ser substitudo
pelos valores finais e no ser repetido indefinidamente.

Restringindo a durao ativa de um elemento usando "min" e "max"

Assim como voc pode restringir o tempo de repetio de uma animao, voc pode at mesmo
restringir a durao ativa de uma animao. Os atributos "min" e "max" especificam o valor mnimo e
mximo da durao ativa, respectivamente. Eles nos fornecem uma maneira de controlar o limite
inferior e superior da durao do elemento ativo. Ambos os atributos tomam um valor de clock como
um valor.
O "min" especifica o comprimento do valor mnimo da durao ativa, medido no tempo do elemento
ativo. O valor deve ser maior ou igual a "0", que o valor padro e no restringe a durao ativa.

Para "max", o valor do clock especifica o comprimento do valor mximo da durao ativa, medido no
tempo de ativao do elemento. O valor tambm deve ser maior que "0". O valor padro para "max"
"indefinite". Isso no restringe a durao ativa.

Se os atributos "min" e "max" forem especificados, o valor mximo deve ser maior ou igual ao valor
mnimo. Se esse requisito no for cumprido, ambos os atributos sero ignorados.

Mas o que define a durao ativa de um elemento? Mencionamos a durao da repetio antes, alm da
"durao simples", que a durao da animao sem qualquer repetio (especificada usando "dur"),
ento como que todos eles funcionam juntos? Qual substitui o qu? E ento o que sobre o atributo
final que substituiria e simplesmente terminaria a animao?

A maneira como isso acontece que o navegador primeiro calcular a durao ativa com base nos
valores "dur", "repeatCount", "repeatDur" e "end". Em seguida, ele executa a durao calculada contra
os valores min e max especificados. Se o resultado estiver dentro dos limites, este primeiro valor de
durao calculada est correto e no ser alterado. Caso contrrio, podem ocorrer duas situaes:

Se a primeira durao calculada for superior ao valor mximo, a durao ativa do elemento definida
como sendo igual ao valor mximo.

Se a primeira durao calculada for menor que o valor mnimo, a durao ativa do elemento torna-se
igual ao valor mnimo e o comportamento do elemento o seguinte:

Se a durao de repetio (ou a durao simples se o elemento no repetir) do elemento for maior que
"min", ento o elemento reproduzido normalmente para a durao ativa ("min" restrita).

Caso contrrio, o elemento reproduzido normalmente por sua durao de repetio (ou durao
simples se o elemento no repetir) e, em seguida, congelado ou no mostrado dependendo do valor do
atributo de preenchimento.

Por fim, se um elemento definido para comear antes de seu pai (por exemplo, com um valor de
desvio negativo simples), a durao mnima medida a partir do tempo de incio calculado e no no
incio observado. Isto significa que o valor mnimo pode no ter o efeito observado.

<animate> exemplo: morphing paths

Um dos atributos que podem ser animados no SMIL (mas no em CSS) o atributo "d" (abreviao de
dados) de um <path> SVG. O atributo "d" contm os dados que definem o contorno da forma que
voc est desenhando. Os dados de caminho consistem em um conjunto de comandos e coordenadas
que indicam ao navegador onde e como desenhar pontos, arcos e linhas que compem o caminho final.

Animar esse atributo nos permite transformar (to morph) os caminhos SVG e criar efeitos de
interpolao de formas. Mas, para ser capaz de transformar formas, o incio, fim, e qualquer forma
intermediria precisam ter o exato mesmo nmero de vrtices/pontos, e eles precisam aparecer na
mesma ordem. Se o nmero de vrtices no corresponder, a animao no funcionr. A razo para isso
que a mudana de forma realmente acontece movendo os vrtices e interpolando suas posies, ento se
um vrtice estiver faltando ou no coincidir, os caminhos no sero interpolados mais.

Para animar um caminho SVG, especifique o atributoName a ser d e, em seguida, defina os valores de e
para os que especificam as formas de incio e de trmino e voc pode usar o atributo values para
especificar quaisquer valores intermedirios nos quais voc deseja que a forma passe entre.

Por uma questo de brevidade, eu no vou entrar em detalhes de como fazer isso. Em vez disso, voc
pode ler este excelente artigo de Noah Blon, no qual ele explica como ele criou uma animao de tipo
de animao de forma-tweening usando <animar>. A demonstrao ao vivo para o artigo de No esta:

HTML
<img />
<svg viewbox="0 0 100 100">
<path fill="#1EB287">
<animate
attributeName="d"
dur="1440ms"
repeatCount="indefinite"
keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1"
calcMode="spline"
keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1"
values="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;

M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
 0,50 0,50 0,0
Z;

M 50,0
C 75,25 75,25 100,50
75,75 75,75 50,100
25,75 25,75 0,50
25,25 25,25 50,0
Z;

M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;

M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;

M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;

M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;

M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z;"/>
<animate
attributeName="fill"
dur="1440ms"
 repeatCount="indefinite"
keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1"
calcMode="spline"
keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1"
values="#1eb287;
#1eb287;
#1ca69e;
#188fc2;
#188fc2;
#bb625e;
#ca5f52;
#1eb287;"/>
</path>
</svg>

CSS
body {
background: #fff;
height: 100vh;
text-align: center;
box-sizing: border-box;
padding-top: calc(50vh - 56px);
}

img, svg {
display: inline-block;
vertical-align: middle;
}

svg {
height: 38px;
width: 38px;
display: inline-block;
}
Animando ao longo de caminhos arbitrrios: O elemento <animateMotion>

O elemento <animateMotion> o meu elemento favorito de animao SMIL. Voc pode us-lo para
mover um elemento ao longo de um caminho. Voc especifica o caminho de movimento usando uma
de duas maneiras que vamos mostrar a seguir e, em seguida, define o elemento que se mover ao longo
desse caminho.

O elemento <animateMotion> aceita os mesmos atributos mencionados anteriormente, mais esses trs:
"keyPoints", "rotate" e "path". Alm disso, h uma diferena em relao ao atributo "calcMode", onde o
valor padro estimulado para <animateMotion>, no linear.

Especificando o caminho do movimento usando o atributo path

O atributo <path> usado para especificar o caminho do movimento. Ele expresso no mesmo formato
e interpretado da mesma forma que o atributo <d> no elemento <path>. O efeito de uma animao de
caminho de movimento (motion path) adicionar uma matriz de transformao suplementar na matriz
de transformao atual para o objeto referenciado, o que causa uma traslao ao longo dos eixos x e y do
sistema de coordenadas de usurio atual pelos valores X e Y calculados. Em outras palavras, o caminho
especificado calculado em relao posio atual do elemento, usando os dados do caminho para
transformar o elemento na posio do caminho.

Para o nosso crculo, vamos anim-lo ao longo de um caminho que se parece com o seguinte:

O cdigo necessrio para que o crculo se mova ao longo deste caminho :

<animateMotion
xlink:href="#circle"
dur="1s"
begin="click"
fill="freeze"
path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11
.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-
6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5" />

H uma coisa que eu quero focar aqui: as coordenadas nos dados do caminho. O caminho comea
movendo (M) para o ponto com coordenadas (0, 0), antes de comear a desenhar uma curva (c) para
outro ponto. importante notar que o ponto (0, 0) na verdade a posio do crculo, no importa
onde esteja - NO o canto superior esquerdo do sistema de coordenadas. Como mencionamos acima,
as coordenadas no atributo path so relativas posio atual do elemento!

O resultado do cdigo acima :

HTML
<svg width="500" height="350" viewBox="0 0 500 350">
<circle id="circle" r="20" cx="100" cy="100" fill="tomato" />

<animateMotion
xlink:href="#circle"
dur="1s"
begin="click"
fill="freeze"
path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3

c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11
.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-
6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"
/>
</svg>
<p>Click on the circle to animate it.</p>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Se voc fosse especificar o caminho a partir de um ponto diferente de (0, 0), o crculo iria abruptamente
saltar pela quantidade especificada no ponto inicial. Por exemplo, suponha que voc desenhe um
caminho no Illustrator e exporte esses dados de caminho para usar como um caminho de movimento
(isso o que eu fiz na primeira vez que fiz isso); O caminho exportado pode parecer algo como isto:

<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.4,102.2c3.2-3.4,18.4-0.6,23.4-

0.6c5.7,0.1,10.8,0.9,16.3,2.3c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,1
8.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-
3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5c1.9-2.1,3.7-5.5,6.5-6.5"/>
O ponto de partida do caminho neste caso (100.4, 102.2). Se usssemos esses dados como o caminho
de movimento, o crculo saltar por ~ 100 unidades para a direita e ~ 102 unidades para baixo e ento
iniciar o movimento ao longo do caminho em relao nova posio. Ento, certifique-se de manter
isso em mente quando voc preparar o caminho de movimento para a sua animao.

Se usado, os atributos <from>, <by>, <to> e <values> especificam uma forma na tela atual que
representa o caminho de movimento.

Especificando o caminho de movimento usando o elemento <mpath>

H tambm outra maneira de especificar um caminho de movimento. Em vez de usar o atributo path
relativo, voc pode fazer referncia a um caminho externo usando o elemento <mpath>. O <mpath>,
filho do elemento <animateMotion>, ento referenciaria o caminho externo usando o atributo <xlink:
href>.

<animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze">

<mpath xlink:href="#motionPath" />
</animateMotion>

O caminho de movimento <path> pode ser definido em qualquer parte do documento; Ele pode at ser
literalmente apenas definido dentro de um elemento <defs> e no renderizado na tela. No prximo
exemplo, o caminho processado porque, na maioria dos casos, voc pode querer mostrar o caminho
em que o elemento est se movendo ao longo.
Note-se que, de acordo com a especificao:

"Os vrios pontos (x, y) da forma proporcionam uma matriz de transformao suplementar no CTM
para o objeto referenciado que provoca uma translao ao longo dos eixos x e y do sistema de
coordenadas de utilizador atual pelos valores (x, y) da forma calculada ao longo do tempo. Deste modo,
o objeto referenciado transladado ao longo do tempo pelo deslocamento do percurso de movimento
em relao origem do sistema de coordenadas atual do utilizador. A transformao suplementar
aplicada em cima de quaisquer transformaes devido propriedade de transformao do elemento de
destino ou quaisquer animaes nesse atributo devido a elementos de <animateTransform> no elemento
de destino."

Novamente, a posio do crculo "multiplicada" ou "transformada" pelas coordenadas nos dados do

caminho.

No prximo exemplo, temos um caminho no meio da tela. O crculo posicionado no incio do

caminho. No entanto, quando o caminho de movimento aplicado, o crculo no inicia seu movimento
a partir de sua posio atual.

HTML
<svg width="500" height="350" viewBox="0 0 500 350">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-
3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11
.5,31.4,16.7
 c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-
6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<circle id="circle" r="20" cx="100" cy="100" fill="tomato" />
<animateMotion
xlink:href="#circle"
dur="1s"
begin="click"
fill="freeze">
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Veja como o crculo segue a mesma forma do caminho, mas sobre uma posio diferente? Isto devido
ao fato de que a posio do crculo transformada pelos valores dos dados do caminho.

Uma maneira de contornar isso comear com o crculo sendo posicionado em (0, 0), de modo que
quando os dados do caminho forem usados para transform-lo, ele ir iniciar e prosseguir como
esperado.

Outra maneira aplicar uma transformao que "redefine" as coordenadas do crculo para que eles
calculem a zero antes de o caminho ser aplicado.

A seguir est uma verso modificada da demo acima, usando um caminho fechado e repetindo a
animao de movimento indefinidamente.

HTML
<svg width="500" height="350" viewBox="0 0 500 350">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-
13.8,0.1-33.3,0.4-44.8,9.2
c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-
3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-
34.9-10.3-46.5
c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-
8.1-8.3-13.2-11
c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-
18.6-1.5
C222.5,59,212.5,57.8,202.4,58.3"/>
<circle id="circle" r="10" cx="0" cy="0" fill="tomato" />
<animateMotion
xlink:href="#circle"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Substituir regras para <animateMotion>

Como h mais de uma maneira de fazer a mesma coisa para <animateMotion>, s faz sentido ter regras
de substituio para especificar quais valores substituem outros.

As regras de substituio para animateMotion so as seguintes:

Em relao definio do caminho de movimento, o elemento <mpath> substitui o atributo <path>,

que substitui <values>, que substitui <from>, <by> e <to>.
Quanto determinao dos pontos que correspondem aos atributos <keyTimes>, o atributo
<keyPoints> substitui o <path>, que substitui <values>, que substitui <from>, <by> e <to>.

Definir a orientao de um elemento ao longo de um percurso de movimento com rotao

Em nosso exemplo anterior, o elemento que estvamos animando ao longo do caminho passou a ser um
crculo. Mas e se estivermos animando um elemento que tem uma certa orientao como, por exemplo,
um cone de carro?

Neste exemplo, substitu o crculo por um grupo com um ID de "carro", que contm o elemento que
compe o grupo. Ento, a fim de evitar o problema com o movimento ao longo do caminho
mencionado acima, eu apliquei uma transformao para o carro para que translade por uma quantidade
especfica, de modo que a posio inicial termina em (0, 0). Os valores dentro das transformaes so
realmente as coordenadas do ponto onde o primeiro caminho do carro comea a desenhar (logo aps o
comando M).

O carro ento comea a se mover ao longo do caminho de movimento. Mas ... no segue a orientao
correta de movimento. A orientao do carro fixa, e no muda para coincidir com a do caminho de
movimento. Para mudar isso, vamos usar o atributo <rotate>.

O atributo <rotate> tem um de trs valores:

Auto: Indica que o objeto girado ao longo do tempo pelo ngulo da direo (ou seja, vetor tangente
direcional) do percurso de movimento.
Auto-reverse: Indica que o objeto girado ao longo do tempo pelo ngulo da direo (ou seja, vetor
direcional tangente) do percurso de movimento mais 180 graus.
Um nmero: Indica que o elemento alvo tem uma transformao de rotao constante aplicada a ele,
onde o ngulo de rotao o nmero especificado de graus.

Para corrigir a orientao do carro no exemplo acima, vamos comear com a definio do valor de
<rotate> para "auto". Se voc quiser que o carro se mova para fora do caminho, o valor de "auto-
reverse" corrige isso.

HTML
<svg width="500" height="350" viewBox="0 0 500 350">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.4,58.3c-
13.8,0.1-33.3,0.4-44.8,9.2
c-14,10.7-26.2,29.2-31.9,45.6c-7.8,22.2-13.5,48-
3.5,70.2c12.8,28.2,47.1,43.6,68.8,63.6c19.6,18.1,43.4,26.1,69.5,29.4
c21.7,2.7,43.6,3.3,65.4,4.7c19.4,1.3,33.9-7.7,51.2-15.3c24.4-10.7,38.2-44,40.9-68.9c1.8-16.7,3.4-
34.9-10.3-46.5
c-9.5-8-22.6-8.1-33.2-14.1c-13.7-7.7-27.4-17.2-39.7-26.8c-5.4-4.2-10.4-8.8-15.8-12.9c-4.5-3.5-
8.1-8.3-13.2-11
c-6.2-3.3-14.3-5.4-20.9-8.2c-5-2.1-9.5-5.2-14.3-7.6c-6.5-3.3-12.1-7.4-19.3-8.9c-6-1.2-12.4-1.3-
18.6-1.5
C222.5,59,212.5,57.8,202.4,58.3"/>

<g id="car" transform="translate(-234.4, -182.8)">

<path d="M234.4,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-
6.4C240.8,185.6,238,182.8,234.4,182.8z"/>
<circle cx="234.4" cy="189.2" r="2.8"/>
<path d="M263,182.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-
6.4C269.4,185.6,266.6,182.8,263,182.8z"/>
<circle cx="263" cy="189.2" r="2.8"/>
<path d="M275,171.4c-2.8-0.7-5.2-3-6.3-5.1l-3.9-7.4c-1.1-2.1-3.9-3.8-6.3-3.8h-22.6c-2.4,0-5,1.8-
5.7,4.1l-2.4,7
c-0.2,0.9-1.8,5.5-5,5.5c-2.4,0-5,3.1-5,5.5v8.2c0,2.4,1.9,4.3,4.3,4.3h4.5c0-0.2,0-0.3,0-0.5c0-
4.3,3.5-7.8,7.8-7.8
 c4.3,0,7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h13.1c0-0.2,0-0.3,0-0.5c0-4.3,3.5-7.8,7.8-
7.8s7.8,3.5,7.8,7.8c0,0.2,0,0.3,0,0.5h8.1
c2.4,0,4.3-1.9,4.3-4.3v-6.5C283.2,172,277.3,172,275,171.4z"/>
<path d="M241.8,170.3h-12.5c0.7-1.1,1.1-2.2,1.2-2.6l2-5.9c0.6-1.9,2.8-3.5,4.8-
3.5h4.5V170.3z"/>
<path d="M246.1,170.3v-12h10.4c2,0,4.4,1.5,5.3,3.3l3.3,6.3c0.4,0.8,1.1,1.7,2,2.4H246.1z"/>
</g>
<animateMotion
xlink:href="#car"
dur="3s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
p{
color: #aaa;
text-align: center;
margin: 2em 0;
}

Isso parece melhor, mas ainda temos um problema: o carro parece que est se movendo para trs ao
longo do caminho! A fim de mudar isso, teramos de virar o carro ao longo de seu eixo y. Isso pode ser
feito escalando-o por um fator de "-1" ao longo desse eixo. Assim, se aplicarmos a transformao para o
<g> com a ID "car", o carro vai avanar como esperado. A transformao de escala s vai ser encadeada
com a translao que aplicamos anteriormente.

<g id="car" transform="scale (-1, 1) translate(-234.4, -182.8)">

Controlando a distncia de animao ao longo do caminho de movimento com <keyPoints>

O atributo <keyPoints> fornece a capacidade de especificar o progresso ao longo do caminho de

movimento para cada um dos valores especificados de <keyTimes>. Se especificado, <keyPoints> faz
com que <keyTimes> se aplique aos valores em <keyPoints> em vez dos pontos especificados na matriz
de atributo <values> ou os pontos no atributo <path>.

<KeyPoints> toma uma lista separada por ponto-e-vrgula de valores de ponto flutuante entre 0 e 1 e
indica at que ponto ao longo do caminho de movimento o objeto deve se mover no momento
especificado pelo valor <keyTimes> correspondente. Os clculos de distncia so determinados pelos
algoritmos do navegador. Cada valor de progresso na lista corresponde a um valor na lista de atributos
<keyTimes>. Se uma lista de <keyPoints> for especificada, deve haver exatamente tantos valores na lista
<keyPoints> quantos na lista <keyTimes>.

Uma coisa importante a observar aqui definir o valor <calcMode> para "linear" para <keyPoints>
trabalhar.

Movendo texto ao longo de um caminho arbitrrio

Mover texto ao longo de um caminho arbitrrio diferente de mover outros elementos SVG ao longo
de caminhos. Para animar texto, voc vai ter que usar o elemento <animate>, no o elemento
<animateMotion>.

Primeiro, vamos comear posicionando o texto ao longo de um caminho. Isso pode ser feito aninhando
um elemento <textPath> dentro do elemento <text>. O texto que vai ser posicionado ao longo de um
caminho ser definido dentro do elemento <textPath>, no como elemento filho do elemento <text>.

O textPath vai ento referenciar o caminho real que queremos usar, tal como fizemos nos exemplos
anteriores. O caminho referenciado tambm pode ser renderizado na tela ou definido dentro de uma
<defs>. Verifique o cdigo na seguinte demonstrao.

Para animar o texto ao longo desse caminho, vamos usar o elemento <animate> para animar o atributo
<startOffset>.

O <startOffset> representa o deslocamento do texto no caminho. 0% o incio do caminho; 100%

representa o fim dele. Portanto, se, por exemplo, o deslocamento for definido como 50%, o texto
comear no meio do caminho.

Ao animar o <startOffset>, vamos criar o efeito do texto se movendo ao longo do caminho.

HTML
<svg width="500" height="350" viewBox="0 0 500 350">
<path id="myPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-
3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3

c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11
.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-
6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"/>
<text>
<textpath xlink:href="#myPath">
Text laid out along a path.

<animate attributeName="startOffset" from="0%" to ="100%" begin="0s" dur="5s"

repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0.1 0.2 .22 1"/>
</textpath>
</text>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}
text {
fill: deepPink;
font-size: 2em;
}

Animando transformaes: O elemento <animateTransform>

O elemento <animateTransform> anima um atributo de transformao em um elemento de destino,

permitindo que as animaes controlem a translao (translate), a escala (scale), a rotao (rotate)e a
inclinao (skew). Ele usa os mesmos atributos mencionados para o elemento <animate>, alm de um
atributo adicional: "type".

O atributo <type> usado para especificar o tipo de transformao que est sendo animado. preciso
um dos cinco valores: <translate>, <scale>, <rotate>, <skewX> e <skewY>.

Os atributos <from>, <by> e <to> tomam um valor expresso usando a mesma sintaxe que est
disponvel para o tipo de transformao dado:
+ Para um <type="translate">, cada valor individual expresso como <tx> [, <ty>].
+ Para um <type="scale">, cada valor individual expresso como <sx> [, <sy>].
+ Para um <type="rotate">, cada valor individual expresso como <rotate-angle> [<cx> <cy>].
+ Para um <type = "skewX"> e <type = "skewY">, cada valor individual expresso como <skew-angle>.

Voltando a uma demonstrao anterior, onde rodamos o retngulo rosa usando o elemento
<animateTransform>. O cdigo para a rotao semelhante ao seguinte:

HTML
<svg width="500" height="150">
<style>
rect {
-moz-transform-origin: 75px 75px;
transform-origin: 50% 50%;
}
</style>
<rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink"
transform="rotate(0) translate(0 0)"/>
<animateTransform
 xlink:href="#deepPink-rectangle"
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 75 75"
to="360 75 75"
dur="2s"
begin="0s"
repeatCount="indefinite"
fill="freeze"
/>
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

Um outro exemplo:

HTML
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s"
repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
</svg>

CSS
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #FC0;
}
svg {
position: fixed;
 top: 20%;
height: 60%;
left: 20%;
width: 60%;
}

Animar uma nica transformao simples, no entanto, as coisas podem ficar muito confusas e
complicadas quando vrias transformaes so includas, especialmente porque um
<animateTransform> pode substituir outro, ento ao invs de adicionar e encadear efeitos, voc pode
acabar com o oposto. Os exemplos so vastos, e fora do mbito deste artigo. Para transformar SVGs, eu
recomendo usar transformaes CSS. As implementaes esto trabalhando para que o ltimo funcione
perfeitamente com o SVG, ento voc nunca precisar usar o SMIL para animar transformaes em
SVG.

O elemento <set>

O elemento <set> fornece um meio simples de definir o valor de um atributo para uma durao
especificada. Ele suporta todos os tipos de atributos, incluindo aqueles que no podem ser interpolados,
como valores de "string" e "booleanos". O elemento <set> no-aditivo. Os atributos <additive> e
<cumulate> no so permitidos, e sero ignorados se especificados.

Uma vez que <set> usado para definir a um elemento <to> um valor especfico durante um tempo
especfico, ele no aceita todos os atributos mencionados para os elementos de animao anteriores. Por
exemplo, ele no tem um atributo <from> ou <by>, porque o valor que muda no muda
progressivamente ao longo do perodo de tempo.

Para definir, voc pode especificar ao elemento que voc est direcionando, os atributos <name>,
<type>, o valor <to>, e o tempo de animao pode ser controlado com: <begin>, <dur>, <end>, <min>,
<max>, <restart>, <repeatCount>, <repeatDur> e <fill> .

O seguinte, um exemplo que define a cor do retngulo rotativo para azul quando ele clicado. A cor
permanece azul durante uma durao de 3 segundos, e depois volta para a cor original. Toda vez que o
retngulo clicado, a animao definida disparada e a cor alterada por trs segundos.

HTML
<svg width="500" height="350">
<style>
rect {
-moz-transform-origin: 75px 75px;
transform-origin: 50% 50%;
}
</style>
<rect id="deepPink-rectangle" width="50" height="50" x="225" y="125" fill="deepPink"
transform="rotate(0) translate(0 0)"/>
<animateTransform
xlink:href="#deepPink-rectangle"
attributeName="transform"
 attributeType="XML"
type="rotate"
from="0 250 150"
to="360 250 150"
dur="2s"
begin="0s"
repeatCount="indefinite"
fill="freeze"
/>
<set xlink:href="#deepPink-rectangle" attributeName="fill"
to="#0099AA" begin="click" dur="3s" />
</svg>

CSS
svg {
border: 3px solid #eee;
display: block;
margin: 1em auto;
}

Palavras finais

SMIL tem muito potencial, e eu mal arranhei a superfcie e s toquei no bsico das tcnicas de como
eles funcionam em SVG. Um monte de efeitos muito impressionantes podem ser criados, especialmente
aqueles envolvendo "morphing" e "transforming shapes". O cu o limite. Ficar louco! E no se
esquea de compartilhar o que voc faz com a comunidade; Ns adoraramos ver o que voc tem feito.
Obrigado por ler!