SMIL/animateTransform

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
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:

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-Elemente zu tranformieren.


Weblinks[Bearbeiten]