SVG-Kombination in Animation

Question

Ich kenne die Animationsmöglichkeiten von SVG, aber gibt es eine Möglichkeit, Bilder einfach zu Animationen wie bei animierten GIFs zu kombinieren? Zum Beispiel, indem man zwischen einem Kreis,

und einem Rechteck,

Answer 1

Nun könnten Sie möglicherweise die Alphawerte ein- und ausblenden, wenn dies der gewünschte Effekt ist. d.h. den Kreis ausblenden und das Rechteck gleichzeitig einblenden und umgekehrt.

Die tatsächliche Formumwandlung von einer zur anderen müssten wahrscheinlich von Ihnen mit JavaScript durchgeführt werden.

Answer 2

Wenn Ihr SVG in einem Webbrowser angezeigt wird, können Sie es durch Manipulation der Knoten mit JavaScript animieren. Mein "Webseite" ist ein Beispiel dafür.

Answer 3

Wenn Sie Pfad-Elemente anstelle von einfachen Rechteck- und Kreiselementen verwenden würden, wäre es möglich, Pfadmorphing zu verwenden, um eine Form in eine andere zu morphieren, indem Sie SVG-Animationen verwenden.

Es gibt ziemlich gutes Beispiel dafür auf carto.net.

Je nach Anwendungsfall gibt es möglicherweise einige Nachteile bei dieser Lösung. Die "Bilder", die Sie in die Animation einfügen, müssen nicht nur Pfadelemente sein, es gibt auch einige weitere Einschränkungen, wie z.B. dass die Pfadelemente die gleiche Anzahl von Eckpunkten haben müssen und sie müssen denselben Typ haben.