Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

animateMotion

O elemento animateMotion interfere em uma elemento referenciado para se mover ao longo de uma trajetória de movimento.

Contexto de uso

CategoriasElemento de animação
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos descritivos
<mpath>

Exemplo

Código fonte Resultado
<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
          stroke="lightgrey" stroke-width="2" 
          fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />

    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx="" cy="" r="5" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

» animateMotion.svg

Atributos

Atributos globais

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGAnimateMotionElement.

Relacionado

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: Sebastianz, caio
 Última atualização por: Sebastianz,