tag:forum.selfhtml.org,2005:/self Ein Pfad zum Valentin – SELFHTML-Blog 2021-02-14T06:25:12Z https://forum.selfhtml.org/weblog/2021/feb/14/ein-pfad-zum-valentin/1784113?srt=yes#m1784113 Matthias Scharwies mscharwies@selfhtml.org 2021-02-14T06:25:12Z 2021-02-14T06:59:17Z Ein Pfad zum Valentin <p>Vor ein paar Tagen stieß ich auf einen Artikel, dass Chrome 88 jetzt auch die <a href="https://wiki.selfhtml.org/wiki/CSS/Funktionen/path()" rel="nofollow noopener noreferrer">path()</a>-Funktion bei clip-path unterstütze. Schnell mal <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#path.28.29-Funktion" rel="nofollow noopener noreferrer">im SELF-Wiki</a> geschaut: Das letzte Beispiel bestand aus einem polygon mit vielen einzelnen Punkten.</p> <p>Pfade haben gegenüber Polygonen viele Vorteile:</p> <ul> <li>Anstelle absolut positionierter Punkte, kann ein Ausgangspunkt (<code>m x,y</code>) definiert und von da an relativ positioniert werden, was spätere Verschiebungen erleichtert.</li> <li>Es können zusätzlich zu Geraden auch Bögen und Kurven verwendet werden.</li> </ul> <p><a href="/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/1387cb4e-6e8b-11eb-9220-b42e9947ef30.jpg?size=medium" alt="Beschneidungen mit path()" title="Beschneidungen mit path()" loading="lazy"></a></p> <p>Interessant ist, dass die path()-Funktion nicht nur hier bei clip-path, sondern auch bei <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/offset" rel="nofollow noopener noreferrer">offset-Animation</a> und bald auch shape-outside verwendet wird.</p> <p>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.</p> <figure><iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-Shape-Morphing-04.html" width="700" height="580"><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> <p>Manche Effekte, wie das <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Shape-Morphing#Herzschlag" rel="nofollow noopener noreferrer">Shape-Morphing</a> 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 <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Masken_und_Beschneidungen/clip-path#Referenzieren_einer_SVG-Grafik" rel="nofollow noopener noreferrer">Referenzierung mit url()</a> realisiert werden könnten.</p>