<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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
animateChrome Soporte completo 2Edge ? Firefox Soporte completo 4IE Sin soporte NoOpera Soporte completo 9Safari Soporte completo 4WebView Android Soporte completo 4Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 4Samsung Internet Android ?
attributeNameChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
attributeTypeChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
durChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
repeatCountChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toChrome ? Edge ? Firefox ? IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida