SVG/Element/animateTransform

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

Das animateTransform-Element animiert SVG-Transformationen.

Mit animate und der Angabe von attributeName können Sie beliebige XML-Attribute animieren. Bei transform ist dies nicht möglich, da neben den Werten an sich auch noch der Typ der Transformation angegeben werden muss.

Syntax
Start-Tag: notwendig
End-Tag: ggf. notwendig
Elternelemente
Darf vorkommen in:
grafische Elementen und use
erlaubte Inhalte
desc, metadata, title
Attribute
Name Inhalt Standardwert Bedeutung
attributeName transform Pflichtangabe
by CDATA
from NUMBER Anfangswert des zu animierenden Attributs
to NUMBER Endwert des animierten Attributs
type translate
scale
rotate
skewX, skewY		 Typ der Transformation

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel 
<ellipse cx="100" cy="100" rx="50" ry="50" fill="#c32e04">
	<animateTransform 
		attributeName="transform" 
		type="scale" 
		from="1" to="1.5" 
		dur="4s" 
		fill="freeze" 
	/>
</ellipse>


Beachten Sie: Vergessen Sie trotzdem nicht: attributeName:transform;.
Empfehlung: Normalerweise überschreiben sich animierte Transformationen. Um mehrere Transformationen gleichzeitig zu animieren, müssen Sie die Eigenschaft additive="sum" setzen.

Siehe auch

Weblinks

Abgerufen am 7.12.2025
von "http://wiki.selfhtml.org/wiki/SVG/Element/animateTransform"