<animate>

El elemento animate de SVG se utiliza para animar un atributo o propiedad a través del tiempo. Normalmente se inserta dentro del elemento o referenciado con el atributo href.

Contexto de uso

CategoriasElemento de animación
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos descriptivos

Atributos

Atributos globales

Atributos específicos

DOM

Este elemento implementa la interfaz de SVGAnimateElement.

Ejemplo

SVG

html
<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="x"
      from="-100"
      to="120"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

Result

Sobre Accesibilidad

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

Para más información (en inglés):

Especificaciones

Specification
SVG Animations Level 2
# AnimateElement

Compatibilidad con navegadores

BCD tables only load in the browser