nicht angemeldet
Ein Pfad zum Valentin
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.
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.
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.
veröffentlicht von
Matthias Scharwies