Kategorien
Design HTML/CSS Webdesign

CSS statt SVG: Formen erstellen, animieren und morphen

Wenn es um komplexe Formen und Animationen geht, ist SVG häufig das Format der Wahl – das ja auch nicht zu Unrecht. Doch dank neuer CSS3-Eigenschaften erstellst du Formen jenseits von Rechteck und Kreis sogar ganz ohne SVG und animierst diese zudem noch.

Komplexe Formen mit „clip-path“

Die CSS3-Eigenschaft „clip-path“ ermöglicht es, Elemente auf (fast) beliebige Formen zu beschneiden. Dazu stehen dir die geometrischen Grundformen „inset()“ für ein Rechteck, „ellipse()“ und „circle()“ für Ellipse und Kreis sowie für mehreckige Formen „polygon()“ zur Verfügung.

Wenn es darum geht, aus einem Bild oder einem HTML-Element nur einen einfachen rechteckigen oder runden Ausschnitt darzustellen, sind „inset()“, „ellipse()“ und „circle()“ gute Möglichkeiten. Interessant ist aber vor allem die „polygon()“-Funktion, mit der beliebige mehreckige Formen erstellt werden können.

div {
  clip-path: polygon(50% 0%, 65.5% 32.9%, 100% 38.2%, 75% 63.8%, 80.9% 100%, 50% 82.9%, 19.1% 100%, 25% 63.8%, 0% 38.2%, 34.5% 32.9%);
  width: 300px;
  height: 300px;
}

Bei der Verwendung von „polygon()“ werden beliebig viele Koordinatenpaare definiert, die per Komma voneinander getrennt sind. Erlaubt sind nicht nur absolute Werte, sondern auch prozentuale Angaben. Das hat den Vorteil, dass du die Breite und Höhe durch die CSS-Eigenschaften „width“ und „height“ definierst.

Bei der im Beispiel definierten Form handelt es sich um einen Stern. Da die Koordinaten relativ definiert sind, ist es ein Leichtes, die Breite und Höhe der Form zu verändern.

Form animieren per „transition“

Dank der „transition“-Eigenschaft oder der „animation“-Eigenschaft in Kombination mit der „@keyframes“-Regel hast du auch die Möglichkeit, zwischen zwei per „clip-path“ definierten Formen einen animierten Übergang zu erzeugen.

svg_clip-path_animation

Dazu definierst du beispielsweise per „:hover“ eine Pseudoklasse und gibst die Zielform des Polygons an. Wichtig hierbei ist, dass die Anzahl der Koordinaten sowohl in der Quell- als auch in der Zielform identisch sind.

div:hover {
  clip-path: polygon(50% 0%, 80.9% 7.2%, 97.5% 33.7%, 100% 64.6%, 79.4% 88.1%, 50% 100%, 20.6% 88.1%, 0% 64.6%, 2.5% 33.7%, 19.1% 7.2%);
}

Sobald ein Koordinatenpaar zu viel oder zu wenig vorhanden ist, funktioniert der animierte Übergang nicht mehr. Stattdessen wechseln die beiden Formen ohne Animation.

Formen in Illustrator anlegen

Gerade bei so komplexen Formen ist es schwierig, die Koordinaten selbst festzulegen. Da ist es einfacher und hilfreicher, die Form einfach in Illustrator oder einem anderen Zeichenprogramm, welches den SVG-Export beherrscht, zu zeichnen. Willst du die Form später als relative Prozentangaben in der „polygon()“-Funktion angeben, sollte die Form eine Breite oder Höhe von 100 Pixel haben.

Anschließend exportierst du die Zeichnung als SVG und extrahierst die Koordinaten. Achte darauf, dass du auch tatsächlich ein Polygon angelegt hast. Die Form darf keine Bézierkurven enthalten. Im SVG-Quelltext sollte ein „<polygon>“-Element angelegt sein.

svg_clip-path_illustrator

Während die CSS-Funktion „polygon()“ die Koordinatenpaare per Komma trennt und die einzelnen Werte der Paare per Leerzeichen, ist es beim SVG-Format genau anders herum. Du musst also Komma und Leerzeichen austauschen und den Werten jeweils ein Prozentzeichen zuweisen.

<polygon points="50,0 65.5,32.9 100,38.2 75,63.8 80.9,100 50,82.9 19.1,100 25,63.8 0,38.2 34.5,32.9 "/>

Das Beispiel zeigt, die wie Koordinaten im SVG-Quelltext dargestellt sind.

Vor- und Nachteile von CSS-Formen per „clip-path“

Sowohl die CSS-Variante per „clip-path“ als auch die SVG-Möglichkeiten zur Erstellung komplexer Formen haben ihre Vor- und Nachteile. Nachdem Chrome angekündigt hat, dass es SVG-Animationen per SMIL nicht mehr untestützt, sind Formenmorphing per SVG nur noch per JavaScript möglich.

Die Kombination aus CSS-Eigenschaft „clip-path“ zusammen mit der „transition“-Eigenschaft ermöglichen solche animierten Formenübergänge ganz ohne JavaScript.

Ein Nachteil von „clip-path“ ist, dass nur Polygone möglich sind, aber keine Pfade einschließlich Bézierkurven. Hier hat SVG die Nase vorn, da das „<path>“-Element auch mit Bögen, Aussparungen und Kombination mehrerer Formen kein Problem hat.

Beispiel auf Codepen

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

1 Anwort auf „CSS statt SVG: Formen erstellen, animieren und morphen“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.