In diesem Beispiel zeige ich dir, wie du mit ein wenig Mathematik und JavaScript ein SVG Kreisdiagramm erstellen kannst.
Die Anzahl der Kreisstücke ist die Grundlage zur Ermittlung der Winkel für jedes einzelne Kreisstück. Bei vier Kreisstücken hat jedes Stück einen Winkel von 90° oder bei acht Kreisstücken einen Winkel von 45°. Der Winkel der Kreisstücke wird durch die Division eines Vollkreises (360°) durch die Anzahl der Teilstücke errechnet.
Hinweis: Die Kreisstücke in diesem Beispiel sind alle gleich groß. Wenn du das Beispiel durchgearbeitet hast, kannst du aber auch recht einfach Kreisdiagramme mit unterschiedlich großen Stücken erstellen.
Mit Hilfe der Sinus- und Cosinus-Funktionen kannst du die Positionen der Koordinaten auf dem Kreisumfang errechnen. Das Kreisstück wird in SVG über ein path-Element konstruiert. Beachte bitte, dass JavaScript die Bogenmaße als Werte für die WInkelfunktionen benötigt. „Mit JavaScript zum SVG Kreisdiagramm“ weiterlesen
Jedes Kreiselement ist mit einem animateTransform-Element versehen worden um das Kreissegment wenige Pixel aus dem Kreis heraus zu animieren. Das Ereignis wird mittels mouseover ausgelöst.
In diesem Beispiel siehst du eine Kombination von Transformationen und Pfad Animationen mit SMIL.
Fragen zur Wiederholung von Animationssequenzen
Ich suche noch nach einer Lösung, wie sich Browser übergreifend Animationssequenzen wiederholen lassen. Leider gibt es meines Wissens kein Ereignis, das ausgelöst wird, sobald die letzte Animation ihr Ende erreicht hat.
Die Pfade habe ich mit Affinity Designer erstellt und als SVG ohne Hintergrund exportiert.
Mit dem <animate>-Element kannst du z.B. das d oder pointsattribute. In diesem Beispiel habe ich einen Kreis mit Affinity Designer gezeichnet und dem Kreis vier weitere Ankerpunkte hinzugefügt. Wichtig ist, dass der Pfad jederzeit die gleiche Anzahl der Ankerpunkte aufweist.
Pfadbearbeitung in Affinity Designer
Die Pfade habe ich aus Affinity Designer als SVG-Dateien exportiert. Wie das funktioniert habe ich im Artikel Selektiver SVG-Export mit Affinity Designer beschrieben. Die Animation vom Kreis zur Kreuz- oder Kleeblattform erfolgt mit nur einem zusätzlichen Element namens <animate>.
Pfadanimation mit dem <animate>-Element
Das Attribut begin definiert den Anfang der Animation. AttributeName=“d“ legt das zu animierende Attribut des <path>-Elementes fest. Hier könnte bei Polygonen mit dem Attribut points gearbeitet werden. Mittels dur=“0.5s“ wird die Dauer der gesamten Animation festgelegt, hier 0,5 Sekunden. Im Attribut to=“…“ wird der Pfad der geänderten Form eingefügt. Der Wert freeze des letzten Attributes fill=““ sorgt dafür, dass die Animation am Ende die letzte Form behält und nicht zum Kreis, der ersten Form, zurück springt. Das <animate>-Element berechnet nun nach Aufruf der Datei im Browser die einzelnen Zwischenpositionen der Ankerpunkte von der Ursprungsform zur nächsten Form.
In der hier dargestellten Animation habe ich drei Pfade animiert und zusätzlich noch mit dem <animateTransform>-Element rotieren lassen. Hinweis: Wenn du dir die Grafik in einem eigenen Tab anzeigen lässt oder herunter lädst, kannst du dir den Quelltext der gesamten Animation ansehen.
Browserkompatibilität
Wie leider viel zu oft wird diese Form der SVG-/SMIL-Animation nicht von allen Browseranbietern unterstützt. In Chrome und Firefox läuft die Animation wie erwartet. Safari unterstützt nicht die Wiederholungen die im begin-Attribut mit mehreren Argumenten definiert werden.
Der Internet Explorer unterstützt ab Version 9 SVGen (das obige Beispiel funktioniert dort allerdings nicht). Der neue Browser Edge unter Windows 10 ebenfalls. Ich hatte allerdings noch keine Möglichkeit die Funktionen ausführlich zu testen. Weitere Informationen findest du hier: https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
In diesem Beispiel siehst du einige Animationsmöglichkeiten in SVG. Zur Animation habe ich folgende Elemente verwendet:
SMIL <animateMotion>-Element für den Animationspfad
CSS mit Keyframes für die weiße Schrift
Den Quelltext der animierten SVG-Datei kannst du dir mit einem rechten Mausklick auf das Bild (Seitenquelltext anzeigen) ansehen.
Klicke bitte auf das Bild um die SVG-Animation in einem neuen Tab zu öffnen.
Um die Keyframe-Animation und die SMIL-Animation synchron zu starten, habe ich mit Hilfe von JavaScript der weißen Schrift beim Klick auf die Schaltfläche start writing… eine CSS-Class hinzugefügt.
<script type="text/javascript">
<![CDATA[
function clickme(evt) {
var element = document.getElementById("schrift");
element.classList.add("animatedfont");
}
]]></script>
<style>
Vielleicht hast du auch schon die neue Alternative zu Adobe Illustrator, den Affinity Designer, getestet und ein paar coole Features entdeckt. Viele meiner SVG-Dateien entstehen zunächst als Zeichnung in Illustrator. Dort habe ich immer die Möglichkeit vermisst, einzelne Objekte einer Zeichnung als SVG zu exportieren. Es kommt häufig vor, dass ich eine komplexere Zeichnung um weitere Elemente ergänzen möchte, während ich schon im Prozess der Animation im Code-Editor bin. In Illustrator bedeutete das, dass ich mir nach einem SVG-Export immer das oder die entsprechenden SVG-Elemente aus der Textdatei suchen und anschließend kopieren musste.
Export – Auswahl ohne Hintergrund
Im Programm Affinity Designer kannst du einfach das bzw. die gewünschte(n) Elemente oder Gruppierungen markieren und dann exportieren. In der folgenden Abbildung habe ich die gruppierten Elemente des Hinterrades markiert.
Möchtest du jetzt nur dieses Hinterrad als SVG-Datei exportieren, wählst du einfach aus dem Menü Datei | Exportieren… (Shortcut: ⌥⇧⌘S) und es öffnet sich folgendes Dialogfenster: „Selektiver SVG-Export mit Affinity Designer“ weiterlesen
Sonntagabend und wieder ein neues SVG-Pattern. Die Konstruktion ist recht einfach. Auf einem 150 x 150 Pixel großen Pattern wird ein Quadrat von 150 x 150 Pixeln angelegt. Dieses Quadrat bildet den Vordergrund. Auf dem Quadrat werden vier weitere Quadrate von 25 x 25 Pixeln angelegt. Diese vier Quadrate bilden den Hintergrund. Die darüber gezeichneten Linienelemente (Breite: 2px) deuten die Kreuzungen des Musters an. Die Linien, die auf auf dem Rand des Musters liegen sind in doppelter Strichstärke (4px) angelegt. Die Dreiecke mit der gleichen Farbe der Linien und einer Deckung von 30% (opacity=“0.3″) verstärken den dreidimensionalen Effekt des Musters.