SMIL/animateTransform

10min

einfach

Grundkenntnisse in
• SVG

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.

Das animateTransform-Element animiert SVG-Transformationen.

Beachten Sie: Vergessen Sie trotzdem nicht: attributeName:transform;.

Zusätzlich müssen Sie mittels der Eigenschaft type festlegen, welcher Transformationstyp geändert werden soll:

• translate (Verschiebung)
• scale (Skalierung)
• rotate (Drehung)
• skewX, skewY (Verzerrung)

Der Transformationstyp matrix ist nicht animierbar.

Normalerweise überschreiben sich animierte Transformationen. Um mehrere Transformationen gleichzeitig zu animieren, müssen Sie die Eigenschaft additive="sum" setzen.

Beispiel ansehen …

<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>
 
<g transform="translate(350,100)">
	<rect x="-50" y="-50" width="100" height="100" fill="#dfac20">
		<animateTransform 
			attributeName="transform" type="rotate"
			from="0" to="90" 
			dur="3s" 
			repeatCount="indefinite"
		/>
	</rect>
</g>  
 
<path d="m500,50 h100 l-50,100z" fill="#5a9900" stroke="transparent" stroke-width="5">
	<animateTransform 
		attributeName="transform" 
		type="skewX" 
		from="0" to="50" 
		begin="1s" dur="4s" 
		fill="freeze"
	/>
</path>

Der linke Kreis wird um das 1.5fache skaliert.

Beachten Sie, dass der X- und Y-Abstand zum Nullpunkt auch skaliert werden.

Damit das mittlere Rechteck sich um sich selbst rotiert, bekommt es ein eigenes Koordinatensystem durch <g transform="translate( 350,100)">.

Das rechte Dreieck wird um 50 Grad horizontal verzerrt.

Beachten Sie, dass die Werte der Zustände das gleiche Format haben wie die Parameter der Transformationsbefehle.

Empfehlung:
Verwenden Sie CSS-animation oder die Web Animations API, um SVG-Transformationen zu animieren. Hauptartikel: SVG/Tutorials/Einstieg/SVG mit CSS animieren#Transformationen

• animateMotion
• SMIL
  (Übersicht)
• weitere Elemente
  set

Weblinks

• css-tricks:; animateTransform (A Guide to SVG Animations with SMIL)

• aptico: animateTransform