Für unsere neue Seite durfte ich mich etwas mit SVG-Bild-Animationen beschäftigen und habe mich anfangs mit sehr eigenwilligen Hüpf-Orgien von Armen und Beinen herumschlagen müssen. Unkontrolliert sprangen mir Köpfe, Arme oder Beine vom Körper oder sie drehten sich ohne Halt vom Rest des Körpers weg. 😉 Bis ich festgestellt habe – das muss nicht sein...
Die Schlüssel zum Erfolg:
- die CSS-Property
transform-origin
, welche festlegt ab welchem Punkt im SVG gedreht resp. transformiert werden soll - Die Browser-Konsole, welche hilft die richtige Position und Transformations-Maße zu ermitteln
Wie bin ich also vorgegangen?
- erstellen eines SVG-Bildes mit verschiedenen Ebenen, welchen ich allen einen Namen gab.
- SVG-Code im Editor überarbeiten, so dass für jede Ebene eine Klasse vergeben ist. (nun ist es möglich diese Klassen im CSS anzusprechen)
- im CSS für die Transformation eine zusätzliche Klasse vergeben (Namen egal) und diese mit den Properties
transform: z.b. rotate(0deg)
undtransform-origin: 0px 0px
befüllen
zum wichtigsten Part 😃
- wechseln in die Browser-Konsole
- das entsprechende Element suchen
- in der Konsole mit den Pfeiltasten die richtige Position und Drehung ermitteln.
- und diese dann in die Klasse übertragen resp. aus der Klasse flux eine Animation machen