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:

1. die CSS-Property transform-origin, welche festlegt ab welchem Punkt im SVG gedreht resp. transformiert werden soll
2. 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) und transform-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