<animate>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 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
Specification |
---|
SVG Animations Level 2 # AnimateElement |
Compatibilidad con navegadores
BCD tables only load in the browser