Ein Pfad zum Valentin
bearbeitet von Matthias ScharwiesVor ein paar Tagen stieß ich auf einen Artikel, dass Chrome 88 jetzt auch die [path()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/path\(\))-Funktion bei clip-path unterstütze. Schnell mal [im SELF-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#path.28.29-Funktion) 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()](/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg?size=medium "Beschneidungen mit path()")](/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg)
Interessant ist, dass die path()-Funktion nicht nur hier bei clip-path, sondern auch bei [offset-Animation](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/offset) 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.
<figure><iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Shape-Morphing-04.html" width="400" height="400"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span></iframe><figcaption>Shape-Morphing mit SMIL</figcaption></figure>
Manche Effekte, wie das [Shape-Morphing](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Shape-Morphing#Herzschlag) 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()](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#Referenzieren_einer_SVG-Grafik) realisiert werden könnten.
Ein Pfad zum Valentin
bearbeitet von Matthias ScharwiesVor ein paar Tagen stieß ich auf einen Artikel, dass Chrome 88 jetzt auch die [path()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/path\(\))-Funktion bei clip-path unterstütze. Schnell mal [im SELF-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#path.28.29-Funktion) 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()](/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg?size=medium "Beschneidungen mit path()")](/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg)
Interessant ist, dass die path()-Funktion nicht nur hier bei clip-path, sondern auch bei [offset-Animation](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/offset) 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.
<figure><iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Shape-Morphing-04.html" width="400" height="400"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span></iframe><figcaption>Shape-Morphing mit SMIL</figcaption></figure>
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()](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#Referenzieren_einer_SVG-Grafik) realisiert werden könnten.