SVG/Elemente/animate

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

Das animate-Element ist das Grundelement für die Animation mit SMIL. Mit dem animate-Element können Sie alle der als animierbar gekennzeichneten Attribute, wie etwa Koordinaten, Längen, Breiten oder Farben, animieren.

Beispiel
<ellipse cx="100" cy="100" rx="50" ry="50" fill="var(--red)">
	<animate 
		attributeName="ry" 
		to="100" 
		dur="3s"
	/> 
</ellipse>
Das eigentlich inhaltsleere ellipse-Element erhält als Kind-Element ein animate-Element. Das attributeName-Attribut erhält als Wert die zu animierende Eigenschaft.


Siehe auch

Weblinks

Start-Tag: notwendig
End-Tag: ggf. notwendig
<animate />
<animate>
  <!-- Kindelement(e) -->
</animate>
Elternelemente Darf vorkommen in:
grafischen Elementegrafischen Elemente

Information: grafische Elemente (SVG)

Elemente, die dazu führen, dass etwas gezeichnet wird
use
erlaubte Inhalte

desc, metadata, title

Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)


attributeName CDATA legt fest, welche Eigenschaft animiert werden soll
attributeType auto
XML
CSS
auto legt fest, ob die Eigenschaft als XML-Attribut oder Stil-Attribut animiert werden soll
fill remove: Objekt wird in den Ursprungszustand versetzt
freeze: Ende der Animation wird dargestellt
remove legt fest, wie das Objekt nach Ablauf der Animation dargestellt werden soll
from legt Anfangswert des zu animierenden Attributs fest
to legt Endwert des zu animierenden Attributs fest
dur nicht negative Zeitangabe
indefinite: unendlich, wird immer wieder wiederholt.
legt den Beginn einer Animation fest
repeatCount NUMBER 1 legt fest, wie oft die Animation wiederholt werden soll

Attribut: Pflichtattribut
Attribut: optionales Attribut