kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

SVG-Pfade mit CSS animieren (Path-Morphing/Shape-Morphing)

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.