<animate>
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde enero de 2020.
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
| Categorias | Elemento de animación |
|---|---|
| Contenido permitido | Cualquier 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
| Especificación |
|---|
| SVG Animations Level 2 # AnimateElement |