Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 2Edge ? Firefox Soporte completo 4IE Sin soporte NoOpera Soporte completo 9Safari Soporte completo 4WebView Android ? Chrome Android Soporte completo 18Edge Mobile ? Firefox Android Soporte completo 4Opera Android Soporte completo 9.5Safari iOS Soporte completo 4Samsung Internet Android ?
attributeNameChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
attributeTypeChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
durChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
repeatCountChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Etiquetas y colaboradores del documento

Colaboradores en esta página: evaferreira
Última actualización por: evaferreira,