<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
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
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 with JavaScript enabled. Enable JavaScript to view data.