Traçados de movimento SVG: ícone ao longo de uma curva

Use animateMotion para mover um elemento SVG por um percurso e coloque um mpath dentro dele para referenciar um traçado existente. rotate="auto" gira a arte em movimento para acompanhar a direção do percurso. A origem local da arte é o ponto que percorre o traçado, portanto um ícone importado precisa de uma âncora deliberada.

Isso é útil quando uma seta, emblema ou pequena ilustração personalizada deve se deslocar sem mudar de forma. Para uma linha que parece se desenhar sozinha, use animação de contorno. Para uma silhueta que se transforma em outra, use morphing de traçados. Essas técnicas resolvem tarefas visuais diferentes.

Mantenha o percurso separado da arte

O percurso define onde o ícone se move. O ícone define o que o leitor vê. A referência de animateMotion do MDN descreve o elemento de movimento, enquanto sua referência de mpath mostra como reutilizar um traçado por referência.

O exemplo original abaixo tem uma seta verde-petróleo e um ponto dourado. Sua seta aponta na direção positiva de X, facilitando inspecionar o efeito da rotação automática. A arte é desenhada ao redor de (0, 0), em vez de ficar distante em uma grande área exportada.

Salve isto como motion.html e abra-o em um navegador. O emblema estático aparece primeiro. Pressione Play para executar uma passagem de quatro segundos; Show static restaura a ilustração inicial.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

A curva cinza visível é um use separado do percurso. Remova esse use se o traçado deva ficar invisível; mantenha a definição em defs para que a animação ainda possa referenciá-lo. O elemento de movimento pertence ao grupo cuja seta e ponto devem se mover juntos.

fill="freeze" mantém o estado final da animação. Ele não tem relação com a pintura verde-petróleo da seta. Este exemplo executa uma vez, facilitando conferir sua posição final em comparação com um loop infinito.

Corrija um ícone que fica afastado do percurso

O movimento é aplicado ao sistema de coordenadas do elemento. Ele não encontra automaticamente o centro visual de um logo. Se seus traçados importados ocuparem coordenadas ao redor de (200, 120), mover o grupo que os contém por um percurso mantém esse deslocamento dentro do grupo.

Escolha o ponto da arte que deve tocar o percurso e translade esse ponto para (0, 0) dentro do grupo em movimento. Para uma âncora em (200, 120), a estrutura é:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

A translação interna prepara a arte; o grupo externo recebe o movimento. Mantenha essas tarefas separadas ao adicionar uma escala ou rotação corretiva. A especificação de animação SVG define o movimento como uma transformação suplementar, portanto transformações existentes ainda afetam o posicionamento final.

Para um emblema, o centro pode ser uma âncora adequada. Para um veículo, você pode querer um ponto de contato da roda; para um ponteiro, sua ponta. O centro da caixa delimitadora é apenas uma estimativa inicial. Inspecione o ponto de contato pretendido em mais de uma posição no percurso.

Uma rotação estacionária tem seu próprio problema de pivô. O guia de transform-origin SVG explica esse caso sem adicionar um percurso de deslocamento.

Escolha se a arte deve girar

Esses valores estão documentados na referência de rotação de movimento do MDN. auto-reverse muda a orientação; não inverte a ordem em que o percurso é percorrido.

Se a arte original apontar para cima, auto não sabe que cima significa frente. Gire um grupo interno da arte até que aponte para o X positivo e aplique o movimento ao grupo externo. Evite girar o próprio percurso apenas para corrigir a orientação local do ícone.

Cantos agudos no percurso podem produzir mudanças abruptas de direção. Um percurso curvo é um ponto de partida melhor quando você quer um giro visivelmente suave. Também deixe espaço ao redor do percurso: um ícone pode se estender além da linha central e ser recortado perto da borda da viewport SVG.

Confira início, meio e final

Abrimos o mesmo percurso e emblema no Chrome e usamos um pequeno ambiente de teste para pausar a linha do tempo SVG em 0, 2 e 4 segundos. O ícone começou embaixo à esquerda, cruzou perto do ponto alto e terminou embaixo à direita. Com auto, sua orientação mudou ao longo da curva. Com rotação 0, a posição no meio foi igual, enquanto a seta permaneceu horizontal.

Essa verificação cobre este exemplo em um navegador. Não é um teste de importação de animação para ferramentas de design nem uma garantia para todos os modos de incorporação de navegador.

Para sua própria arte:

1. Confira o ponto de contato no início do percurso. Corrija os deslocamentos da arte original antes de ajustar o tempo.
2. Pause perto das curvas e confirme que a parte pretendida do emblema acompanha a linha.
3. Compare rotação automática e fixa. Escolha com base na arte, especialmente quando incluir texto.
4. Confira a posição final em busca de recorte e confirme que a repetição começa corretamente.
5. Teste o contexto real de entrega. Este exemplo usa SVG embutido em uma página HTML com controles JavaScript.

animateMotion usa movimento com ritmo uniforme por padrão, como documenta o MDN. Metade da duração, portanto, representa aproximadamente metade da distância percorrida, não necessariamente o parâmetro da curva no meio entre seus pontos de controle. A posição aos dois segundos de nosso percurso cúbico assimétrico ficou ligeiramente à direita de seu ponto alto geométrico.

Ofereça uma versão estática útil

O exemplo começa com um use estático do emblema, e seu movimento só começa após o botão Play ser acionado. Se o JavaScript não executar, a arte estática permanece visível. Quando a preferência de movimento reduzido está ativa, o manipulador a deixa nesse estado.

O recurso de mídia prefers-reduced-motion permite que a página responda à preferência de movimento do usuário. Aqui, o JavaScript lê essa preferência antes de iniciar o movimento SVG e restaura a versão estática se a preferência mudar.

Também testamos a ramificação estática com um controle explícito de prévia de movimento reduzido no ambiente de teste: ele ocultou o grupo animado e exibiu o emblema no local inicial. Esse controle exercitou nossa lógica alternativa; não mudou a configuração de acessibilidade do computador.

Mantenha o significado fora da animação quando possível. O usuário não deveria precisar observar um emblema em movimento para saber um estado ou ler instruções essenciais. Para um ícone decorativo ao lado de texto já descritivo, adapte a identificação de acessibilidade para evitar anunciar o mesmo conteúdo duas vezes.

Prepare seu próprio motivo antes de animá-lo

Se seu motivo personalizado existe apenas como PNG ou JPG, o PerfectVector pode ajudar a recuperar arte SVG editável antes de construir o movimento. Inspecione a silhueta recuperada e as pequenas aberturas, agrupe as partes que devem se deslocar juntas e escolha o ponto de ancoragem. O PerfectVector fornece geometria de origem; percurso, tempo e comportamento de movimento são criados separadamente.

Um SVG existente pode seguir direto para agrupamento e preparação da âncora. Para setas simples como esta demonstração, desenhar diretamente a geometria também é prático. A visão geral da vetorização de imagens explica quando traçar uma origem raster é útil.

Para uma marca personalizada apenas raster, experimente sua imagem no PerfectVector, confira seus contornos e pequenos detalhes e teste esse SVG no início, no meio e no final do percurso. Guarde uma versão estática junto da animada.

Perguntas frequentes

Por que meu ícone se move ao lado do traçado em vez de sobre ele? A arte pode estar deslocada em relação à sua origem local. Escolha o ponto que deve acompanhar o percurso e translade-o para zero dentro do grupo em movimento. Confira o resultado no início e em uma curva.

A rotação automática muda a forma do ícone? Não. O movimento muda o posicionamento e a orientação da arte. Ele não transforma a geometria de seus traçados. A direção frontal da arte original deve apontar para o X positivo para a rotação automática usada neste exemplo.

Posso remover a linha guia visível? Sim. Mantenha a definição do percurso e seu ID, mas remova o elemento separado que desenha a guia. O movimento ainda pode referenciar o traçado por mpath.

Fontes

1. MDN animateMotion — Descreve traçados de movimento, valores de rotação e movimento uniforme padrão.
2. MDN mpath — Explica a referência a um percurso existente dentro do elemento de movimento.
3. Especificação de animação SVG — Define transformações de movimento e sua relação com as coordenadas da arte.
4. MDN atributo rotate — Documenta orientação de movimento fixa, automática e voltada para o sentido contrário.
5. MDN preferência de movimento reduzido — Explica como detectar a preferência de movimento do usuário.