animate

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

Kategorien	Animationselement
Erlaubter Inhalt	Beliebige 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

BCD tables only load in the browser