<animate>

L'elemento SVG  animate è usato per animare un attributo o una proprietà di un elemento nel tempo.
Normalmente viene inserito dentro l'elemento o viene inserito un riferimento con l'attributo href dell'elemento bersaglio.

Uso

CategoriesAnimation element
Permitted contentAny number of the following elements, in any order:
Descriptive elements

Attributi

Attributi globali

Attributi specifici

Interfaccia DOM

Questo elemento implementa l'interfaccia SVGAnimateElement.

Esempio

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>

Risultato

Problemi di accessibilità

L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata. L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata. L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata. L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata. L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata. L'animazione lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese.

Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query multimediale a movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.

Articoli in inglese sull'argomento:

Specifiche

Specifica Stato Commento
Unknown
The definition of '<animate>' in that specification.
Editor's Draft Nessun cambiamento
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<animate>' in that specification.
Recommendation Definizione iniziale

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
animateChrome Full support 2Edge ? Firefox Full support 4IE No support NoOpera Full support 9Safari Full support 4WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support 1.0
attributeNameChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
attributeTypeChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
durChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fromChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
repeatCountChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
toChrome ? Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown