Antwort an „Matthias Scharwies“ verfassen

Vor ein paar Tagen stieß ich auf einen Artikel, dass Chrome 88 jetzt auch die path()-Funktion bei clip-path unterstütze. Schnell mal im SELF-Wiki geschaut: Das letzte Beispiel bestand aus einem polygon mit vielen einzelnen Punkten.

Pfade haben gegenüber Polygonen viele Vorteile:

  • Anstelle absolut positionierter Punkte, kann ein Ausgangspunkt (m x,y) definiert und von da an relativ positioniert werden, was spätere Verschiebungen erleichtert.
  • Es können zusätzlich zu Geraden auch Bögen und Kurven verwendet werden.

Beschneidungen mit path()

Interessant ist, dass die path()-Funktion nicht nur hier bei clip-path, sondern auch bei offset-Animation und bald auch shape-outside verwendet wird.

Hier kann man sehen, dass immer mehr Aspekte aus SVG in CSS eingesetzt werden können, um dort Effekte zu erzielen, die vor einigen Jahren noch undenkbar schienen.

Shape-Morphing mit SMIL

Manche Effekte, wie das Shape-Morphing von Pfaden, benötigen auch heute noch SMIL, andere wie clip-path sind bereit für den Einsatz, wenngleich die oben erwähnte path()-Funktion im Edge und Safari noch nicht funktioniert und dort Beschneideformen mit einer Referenzierung mit url() realisiert werden könnten.

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen