Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Das animate Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.

Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem href attribut des Zielelements.

Usage context

KategorienAnimationselement
Erlaubter InhaltBeliebige Anzahl der folgenden Elemente, in beliebiger Reihenfolge:
Beschreibende Elemente

Attribute

Globale Attribute

Spezifische Attribute

DOM Schnittstelle

Dieses Element implementiert die SVGAnimateElement Schnittstelle.

Beispiel

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>

Ergebnis

Bedenken bezüglich der Barrierefreiheit

Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.

Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die Reduced Motion Media Query zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.

Spezifikationen

Spezifikation Status Kommentar
SVG Animations Level 2
Die Definition von '<animate>' in dieser Spezifikation.
Bearbeiterentwurf Keine Änderung
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von '<animate>' in dieser Spezifikation.
Empfehlung Initiale Definition

Browser Kompatiblität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 2Edge ? Firefox Vollständige Unterstützung 4IE Keine Unterstützung NeinOpera Vollständige Unterstützung 9Safari Vollständige Unterstützung 4WebView Android ? Chrome Android Vollständige Unterstützung 18Edge Mobile ? Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 9.5Safari iOS Vollständige Unterstützung 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 ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

 

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: Dschubba, Sebastianz, fscholz, teoli, martin_ti
Zuletzt aktualisiert von: Dschubba,