Wenn Sie Inline-SVG verwenden, befindet sich der gesamte SVG-Code direkt im HTML und somit im DOM. Sie können ihn genau wie ein <div>, <h1> oder jedes andere HTML-Element stylen. CSS-Styling eröffnet die Möglichkeit für Animationen und Übergänge.
Ein einfaches Beispiel
Siehe den Pen CodePen Logo als Inline-SVG von Chris Coyier (@chriscoyier) auf CodePen.
Ich habe aufgeschrieben, wie man ein etwas komplexeres Design angeht in diesem Tutorial. Hier ist diese Demo.
Siehe den Pen Wufoo SVG Anzeige von Chris Coyier (@chriscoyier) auf CodePen.
In diesem Screencast erstellen wir eine weitere animierte SVG-Anzeige für Wufoo, fast von Grund auf neu. Das Design enthält einige Wolken, die wir so animieren, dass sie vorbeiziehen und sich nahtlos und endlos wiederholen.
Zuerst haben wir Inline-SVG verwendet und es mit CSS direkt im selben HTML-Dokument animiert. Aber dann, nur um zu zeigen, wie es funktioniert, haben wir das CSS *in das SVG selbst verschoben*, was völlig gültig ist. Der Grund dafür könnte sein, dass die Animation dann auch dann ausgeführt werden kann, wenn Sie das SVG als <img> oder background-image verwenden.
Demo
Siehe den Pen kKdDj von Chris Coyier (@chriscoyier) auf CodePen.
Die Browserunterstützung für diese Animation wird variieren. Zum Zeitpunkt des Schreibens funktionierte sie nur in Chrome.
Sie haben Firefox keine wirkliche Chance gegeben, da Sie nur für Webkit präfixiert haben. Und Sie haben den „Vogel“ rückwärts fliegen lassen :)
Ansonsten sehr cool.
Ich war überrascht, dass das img-Tag funktionierte, da ich dachte, Sie hätten in einem der ersten Videos erklärt, dass es nicht funktionieren würde. Oder vielleicht erinnere ich mich falsch.
Bitte, ich würde Ihre Hilfe wirklich schätzen.
Ich muss sehen, wie man SVG über HTML animiert, Animationen, die Keyframes beinhalten..
Sie könnten die Animation direkt auf eines der Pfad- oder Formelemente anwenden.
Hier gibt es ein Beispiel für Hover-Effekte bei Links
Oder für komplexere Animationen könnten Sie eine Bibliothek wie GSAP in Betracht ziehen. Hier ist ein Beispiel