SVG/Element/animateTransform

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

• SMIL/animateTransform

Weblinks

• W3c: AnimateTransformElement