Leider ist clip-path: path() immer noch ein No-Go

Ich war extrem aufgeregt, als ich zum ersten Mal hörte, dass clip-path: path() nach Firefox kommt. Stell dir vor, du könntest einfach eine atmende Box wie die unten mit nur einem HTML-Element und sehr wenig CSS programmieren, ohne SVG oder eine riesige Liste von Punkten in der polygon()-Funktion zu benötigen!

Chris war auch begeistert von der ersten Implementierung.

Wie lustig wäre das denn

Ich beschloss, es auszuprobieren. Ich ging zu CodePen, gab eine <div> im HTML-Panel ein, gab ihr Abmessungen in Viewport-Einheiten, damit sie gut skaliert, fügte einen background hinzu, damit ich sie sehen konnte. Dann ging ich zu MDN, um einige Anwendungsbeispiele zu prüfen... und meine flauschige Wolke der Träume begann zu zerplatzen!

Beachten Sie, dass clip-path: path() nur in Firefox 63-70 mit dem auf true gesetzten Flag layout.css.clip-path-path.enabled in about:config funktioniert und in Firefox 71+ ohne Aktivierung eines Flags. (Quelle: MDN.)

Das waren die Beispiele, die ich gefunden habe

path('M0 200L0 110A110 90 0 0 1 240 100L 200 340z')
path('M.5 1C.5 1 0 .7 0 .3A.25 .25 1 1 1 .5 .3 .25 .25 1 1 1 1 .3C1 .7 .5 1 .5 1Z')

Was sind das für Koordinaten? Die traurige Antwort ist: Pixelwerte! Diese werden verwendet, weil die path()-Funktion einen SVG <path>-String als Argument nimmt, der – ähnlich wie der Wert des SVG d-Attributs auf einem <path>-Element – nur eine Art von Koordinatenwert enthält: Einheitenlose Pixel. Im SVG-Fall skalieren diese Pixel mit der viewBox des <svg>-Elements, aber innerhalb der CSS path()-Funktion skalieren sie überhaupt nicht!

Das bedeutet, dass das Element immer auf denselben festen Bereich zugeschnitten wird, wenn wir ein responsives Element mit einem path()-Wert für die clip-path-Eigenschaft haben. Betrachten wir zum Beispiel ein Quadrat .box mit einer Kantenlänge von 35vw. Wir schneiden es mit der path()-Funktion zu einer Herzform

clip-path: path('M256 203C150 309 150 309 44 203 15 174 15 126 44 97 73 68 121 68 150 97 179 68 227 68 256 97 285 126 285 174 256 203')

Diese Herzform behält die gleiche Größe, während sich die Abmessungen unseres tatsächlichen .box-Elements mit dem Viewport ändern

Das sind schlechte Nachrichten hier im Jahr 2020, wo Responsive Design der Standard und nicht die Ausnahme ist. Abgesehen von dem seltenen Fall, dass das zu beschneidende Element tatsächlich eine feste Pixelgröße hat, ist die path()-Funktion völlig nutzlos! Wir sind heute immer noch besser dran, ein tatsächliches SVG zu verwenden, oder sogar einen polygon()-Näherungswert für clip-path. Kurz gesagt, path() muss noch verbessert werden, obwohl es an den Start gegangen ist.

Amelia Bellamy-Royds hat zwei Möglichkeiten vorgeschlagen

Option 1: Erlauben von calc()-Werten/Einheiten innerhalb der path-Daten. Dies würde wahrscheinlich geschehen, indem die SVG path-Syntax im Allgemeinen erweitert wird.

Option 2: Definieren Sie viewBox in der clip-path-Deklaration, skalieren Sie den Pfad, um ihn anzupassen.

Ich bevorzuge persönlich die erste Option. Der einzige Vorteil, den die zweite gegenüber der Verwendung von SVG bietet, ist die Tatsache, dass wir kein tatsächliches SVG einfügen müssen. Dennoch wird das Einfügen eines tatsächlichen SVG immer eine bessere Unterstützung haben.

Die erste Option könnte jedoch eine enorme Verbesserung gegenüber der Verwendung von SVG darstellen – zumindest genug, um die Verwendung von clip-path für ein HTML-Element anstelle der Einbettung eines SVG darin zu rechtfertigen. Betrachten wir die atmende Box am Anfang dieses Beitrags. Mit SVG haben wir die folgende Markierung

<svg viewBox='-75 -50 150 100'>
  <path/>
</svg>

Beachten Sie, dass die viewBox so eingestellt ist, dass der Punkt 0,0 genau in der Mitte liegt. Das bedeutet, dass wir die Koordinaten der oberen linken Ecke (d. h. die ersten beiden viewBox-Werte) gleich dem Minus der halben viewBox-Abmessungen (d. h. den letzten beiden viewBox-Werten) setzen müssen.

In SCSS legen wir die Kantenlänge ($l) der anfänglichen quadratischen Box als kleinste viewBox-Abmessung fest (was der kleinste der letzten beiden Werte ist). Das ist in unserem Fall 100.

Wir beginnen den Pfad an der oberen linken Ecke unserer quadratischen Box. Das bedeutet einen move to (M) Befehl zu diesem Punkt, mit Koordinaten, die beide gleich dem Minus der halben Kantenlänge sind.

Dann gehen wir zur unteren linken Ecke. Dies erfordert das Zeichnen einer vertikalen Linie mit einer Länge, die der Kantenlänge ($l) entspricht und nach unten, in die positive Richtung der y-Achse, verläuft. Wir verwenden also den Befehl v.

Als Nächstes gehen wir zur unteren rechten Ecke. Wir zeichnen eine horizontale Linie mit einer Länge, die der Kantenlänge ($l) entspricht und nach rechts, in die positive Richtung der x-Achse, verläuft. Wir verwenden den Befehl h, um dies zu erreichen.

Die obere rechte Ecke zu erreichen bedeutet, eine weitere vertikale Linie mit einer Länge zu zeichnen, die der Kantenlänge ($l) entspricht. Wir verwenden also erneut den Befehl v – nur diesmal gehen wir in die entgegengesetzte Richtung der y-Achse, was bedeutet, dass wir dieselben Koordinaten verwenden, aber mit einem Minuszeichen.

Zusammengenommen erhalten wir das SCSS, mit dem wir die anfängliche quadratische Box erstellen können

.box {
  d: path('M#{-.5*$l},#{-.5*$l} v#{$l} h#{$l} v#{-$l}');
  fill: darkorange
}

Das generierte CSS (bei dem $l durch 100 ersetzt wurde) sieht so aus

.box {
  d: path('M-50,-50 v100 h100 v-100');
  fill: darkorange;
}

Das Ergebnis ist in der interaktiven Demo unten zu sehen, bei der das Überfliegen eines Teils der Pfaddaten den entsprechenden Teil in der resultierenden SVG-Grafik hervorhebt und umgekehrt

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Wenn wir jedoch wollen, dass die seitlichen Kanten "atmen", können wir keine geraden Linien verwenden. Ersetzen wir diese durch quadratische Bézierkurven (q). Der Endpunkt bleibt derselbe, nämlich eine Kantenlänge nach unten entlang derselben vertikalen Linie. Wir bewegen uns um 0,#{$l}, um dorthin zu gelangen.

Aber was ist mit dem Kontrollpunkt, den wir vorher angeben müssen? Wir platzieren den Punkt vertikal in der Mitte zwischen dem Start- und dem Endpunkt, was bedeutet, dass wir uns um die Hälfte der Strecke zum Endpunkt nach unten bewegen.

Und sagen wir, wir platzieren ihn horizontal um ein Viertel der Kantenlänge in die eine oder andere Richtung. Wenn wir wollen, dass die Linien hervortreten, um die Box zu verbreiten, oder sie eindrücken, um sie zu verengen, müssen wir etwas Ähnliches tun

d: path('M#{-.5*$l},#{-.5*$l} 
         q#{-.25*$l},#{.5*$l} 0,#{$l} 
         h#{$l} 
         v#{-$l}'); /* swollen box */

d: path('M#{-.5*$l},#{-.5*$l} 
         q#{.25*$l},#{.5*$l} 0,#{$l} 
         h#{$l} 
         v#{-$l}'); /* squished box */

Dies wird in das folgende CSS kompiliert

d: path('M-50,-50 
         q-25,50 0,100 
         h100 
         v-100'); /* swollen box */

d: path('M-50,-50 
         q25,50 0,100 
         h100 
         v-100'); /* squished box */

Die interaktive Demo unten zeigt, wie dieser path funktioniert. Sie können über Pfaddatenkomponenten schweben, um sie auf der SVG-Grafik hervorzuheben. Sie können auch zwischen den aufgeblähten und gequetschten Versionen wechseln.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Das ist nur die linke Kante. Wir müssen dasselbe auch für die rechte Kante tun. Der Unterschied hier ist, dass wir uns von der unteren rechten Ecke zur oberen rechten Ecke bewegen, was nach oben ist (in die negative Richtung der y-Achse). Wir platzieren den Kontrollpunkt außerhalb der Box, um den breiten Ox-Effekt zu erzielen, was auch bedeutet, ihn rechts von seinen Endpunkten zu platzieren (in die positive Richtung der x-Achse). In der Zwischenzeit platzieren wir den Kontrollpunkt innen, um den engen Box-Effekt zu erzielen, was bedeutet, ihn links von seinen Endpunkten zu platzieren (in die negative Richtung der x-Achse).

d: path('M#{-.5*$l},#{-.5*$l} 
         q#{-.25*$l},#{.5*$l} 0,#{$l} 
         h#{$l} 
         q#{.25*$l},#{-.5*$l} 0,#{-$l}'); /* swollen box */

d: path('M#{-.5*$l},#{-.5*$l} 
         q#{.25*$l},#{.5*$l} 0,#{$l} 
         h#{$l} 
         q#{-.25*$l},#{-.5*$l} 0,#{-$l}'); /* squished box */

Das obige SCSS generiert das folgende CSS

d: path('M-50,-50 
         q-25,50 0,100 
         h100 
         q25,-50 0,100'); /* swollen box */

d: path('M-50,-50 
         q25,50 0,100 
         h100 
         q-25,-50 0,-100'); /* squished box */

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Um den Atmungseffekt zu erzielen, animieren wir zwischen dem aufgeblähten und dem gequetschten Zustand

.box {
  d: path('M#{-.5*$l},#{-.5*$l} 
           q#{-.25*$l},#{.5*$l} 0,#{$l} 
           h#{$l} 
           q#{.25*$l},#{-.5*$l} 0,#{-$l}'); /* swollen box */
  animation: breathe .5s ease-in-out infinite alternate
}

@keyframes breathe {
  to {
    d: path('M#{-.5*$l},#{-.5*$l} 
             q#{.25*$l},#{.5*$l} 0,#{$l} 
             h#{$l} 
             q#{-.25*$l},#{-.5*$l} 0,#{-$l}'); /* squished box */
  }
}

Da sich zwischen den beiden Zuständen nur das Vorzeichen der horizontalen Differenz zu den Kontrollpunkten unterscheidet (das Vorzeichen der ersten Zahl nach dem Befehl für die quadratische Bézierkurve q), können wir die Dinge mit einem Mixin vereinfachen

@mixin pdata($s: 1) {
  d: path('M#{-.5*$l},#{-.5*$l} 
           q#{-.25*$s*$l},#{.5*$l} 0,#{$l} 
           h#{$l} 
           q#{.25*$s*$l},#{-.5*$l} 0,#{-$l}')
}

.box {
  @include pdata();
  animation: breathe .5s ease-in-out infinite alternate
}

@keyframes breathe { to { @include pdata(-1) } }

Das ist ziemlich genau das, was ich für die eigentliche Demo der atmenden Box mache, obwohl die Bewegung etwas dezenter ist. Dennoch tut dies absolut nichts für das generierte CSS – wir haben immer noch zwei lange, hässliche und fast identische Pfade im kompilierten Code.

Wenn wir jedoch ein <div> verwenden könnten, das mit einem clip-path: path() beschnitten wird, das alle Arten von Werten unterstützt, einschließlich calc()-Werten, dann könnten wir das Vorzeichen zu einer benutzerdefinierten Eigenschaft --sgn machen, die wir dann mit Hilfe von Houdini zwischen -1 und 1 animieren könnten.

div.box {
  width: 40vmin; height: 20vmin;
  background: darkorange;
  --sgn: 1;
  clip-path: path(M 25%,0%
                  q calc(var(--sgn)*-25%),50% 0,100%
                  h 50%
                  q calc(var(--sgn)*25%),-50% 0,-100%);
  animation: breathe .5s ease-in-out infinite alternate
}

@keyframes breathe { to { --sgn: -1 } }

---

Dies zu können würde einen großen Unterschied machen. Unser Element würde sich schön mit dem Viewport skalieren, und so auch die atmende Box, die wir daraus ausschneiden. Und, was am wichtigsten ist, wir müssten diesen Clipping-Pfad nicht wiederholen, um die beiden verschiedenen Versionen davon (die aufgeblähte und die gequetschte) zu erhalten, da die Verwendung der Vorzeichen-Benutzereigenschaft (--sgn) innerhalb eines calc()-Wertes den Trick machen würde. Wie die Dinge im Moment stehen, ist clip-path: path() jedoch ziemlich nutzlos.