Ein Pfad zum Valentin
Matthias Scharwies
- css
- svg
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:
m x,y
) definiert und von da an relativ positioniert werden, was spätere Verschiebungen erleichtert.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.