SVG mit CSS animieren - 2

x y

Das gelbe Quadrat hat seine linke obere Ecke im Koordinatenursprung, deshalb bleibt diese Ecke beim Rotieren im Ursprung liegen. Das rote Quadrat liegt dagegen weit vom Koordinatenursprung entfernt und umkreist ihn deshalb von fern. Die Hilfslinie verdeutlicht das.

Das blaue Quadrat hat seinen Mittelpunkt durch die X- und y-Koordinaten im Ursprung des SVG Koordinatensystems. Es verwendet die rotation2 Keyframes, die es erst nach der Rotation an den gewünschten Ort schieben. Dadurch erscheint es so, als würde es sich am Punkt (250,100) um sich selbst drehen.

Das grüne Quadrat dagegen verwendet die gleichen Keyframes wie das rote und gelbe Quadrat, hat aber durch das transformation-origin Attribut den Transformationsursprung in seiner Mitte und dreht sich deshalb um sich selbst.

Das pink-farbene Quadrat ist Teil eines Symbols. Es verwendet ebenfalls die rotation1-Keyframes, umkreist aber nicht den Ursprung des SVG. Die Transformation bezieht sich auf den Ursprung der Symbol-Viewbox.