<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

CategoriasAnimation element
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

<?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 Status Comment
SVG Animations Level 2
La definición de '<animate>' en esta especificación.
Editor's Draft Sin cambios
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La definición de '<animate>' en esta especificación.
Recommendation Definición inicial

Compatibilidad con navegadores

BCD tables only load in the browser