Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Grundsätzliche Funktionsweise

In einer SVG-Grafik werden die einzelnen Punkte eines Pfads im d-Attribut angegeben. Mit der d-Eigenschaft von CSS ist es möglich diese Pfadpunkte zu überschreiben. Sofern die Anzahl der Punkte gleich bleibt, kann beispielsweise mit Hilfe einer Transition ein interessanter Mouse-Over-Effekt erzeugt werden. Mit Hilfe von CSS Keyframe-Animationen sind selbstablaufende Animationen möglich.

Die Syntax sieht folgendermaßen aus:

svg path {
 d: path("M134.1,0C132.9, … 91.3L134.1,0z");
}

SVG-Path-Morphing beim Mouse-Over

Das folgende Beispiel zeigt die Pfad-Transformation anhand eines Mouse-Over-Effekts.

<svg viewBox="0 0 100 100">
 <path d="M23,9C8.1,18.9-4.2,39.3,1.3,53.6c10.4,27,78.8,18.3,79.5,13.3c0.5-3.5-32.2-4.5-36.7-20.5C39.5,29.9,68.9,13.2,64,4.2
 C60.2-2.7,38.3-1.1,23,9z"/>
</svg>
svg {
  border:2px solid black;
  margin:2em;
  width:400px;
  fill:deeppink;
}

svg path {
  transition:.2s all ease-in-out;
}

svg:hover path {
  d: path("M3.4,9c-14.9,9.9,23.4,18,28.9,32.3c10.4,27,28.3,30.5,28.9,25.5c0.5-3.5,31.7-22.1,27.2-38.1c-4.6-16.4-39.1-15.5-44-24.5,C40.6-2.7,18.7-1.1,3.4,9z"); 
  fill: lime;
}

Beispiel anschauen

Browser-Support

Die path()-Funktion von CSS ist aktuell experimentell und funktioniert zum Veröffentlichungszeitpunkt dieses Beitrags nur in Chrome. Die Funktion ist Teil der Motion Path-Spezifikation von CSS.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: