Masking vs. Clipping: Wann man was benutzt

Ich habe kürzlich für einen Kunden gearbeitet, bei dem ich sowohl <clipPath>s als auch <mask>s in SVG verwendet habe, um Inhalte für Animationen auszublenden und anzuzeigen. Als ich mit diesem Projekt begann, dachte ich, ich wüsste alle Gründe, das eine dem anderen vorzuziehen. Aber wie es oft so ist, enthüllt die enge Arbeit mit etwas seine Eigenheiten. In diesem Beitrag werden wir einige dieser Details durchgehen, damit Sie so schnell wie möglich produktiv werden können.

Was ist Clipping und Masking und warum sollten wir uns darum kümmern?

Sowohl Clipping als auch Masking verdecken Bereiche, in denen Elemente in einem SVG- oder HTML-Element visuell angewendet werden können. Sie verwenden ein Stück SVG, das als <clipPath> oder <mask> ausgewiesen ist, indem Sie das Element umschließen und eine ID zuweisen, so:

Siehe den Pen d2a9315e310901a3d43ba3bdf8413c65 von Sarah Drasner (@sdras) auf CodePen.

Obwohl keine Demo dieser Techniken Yoksels Versionrivalisieren wird, die nicht nur SVG, sondern auch CSS-Versionen von Clipping und Masking umfassend abdeckt

Siehe den Pen CSS and SVG Masks von yoksel (@yoksel) auf CodePen.

Diese Techniken sind so nützlich, weil wir Inhalte ein- und ausblenden können, was wir für einzigartige Layouts, Realismus in Animationen und performante Alternativen zu Höhenübergängen verwenden können.

Clipping

Betrachten Sie <clipPath> in SVG (oder clip-path in CSS) als eine Möglichkeit, eine Form aus einer anderen Form auszuschneiden. Es gibt kein Konzept der Deckkraft oder eines Alpha-Kanals für Graubereiche. Teile des Elements, auf das ein Clipping-Pfad angewendet wird, sind buchstäblich sichtbar oder nicht sichtbar. Clipping verwendet nur die Geometrie der Form. Aus diesem Grund werden bestimmte visuelle Elemente nicht angewendet. Dazu gehören, aber nicht beschränkt auf: Strich und Strichstile, Verläufe und Füllfarben.

Sie können diese visuellen Elemente jedoch immer noch animieren, ihre Attribute ändern und Transformationen darauf anwenden, diese werden immer noch berücksichtigt. Denken Sie daran, dass Sie beim Animieren dieser Elemente die Elemente innerhalb des <clipPath> ansprechen müssen. Eine weitere Sache, die Sie beachten sollten, ist, dass die weggeschnittenen Teile keine Zeigerereignisse akzeptieren, sodass Ereignisse nur auf den Teilen erfasst werden können, die Sie visuell sehen können.

Schauen Sie sich die Wall-e-Demo unten an. Sehen Sie, wie die Arme verdeckt werden, wenn sie sich ausstrecken und dann wieder in den Körper zurückziehen? Um diesen Arm realistisch auszublenden und anzuzeigen, müssen wir ihn beim Bewegen verdecken. In diesem Fall haben wir einen clipPath aus der Ellbogenkurve erstellt und Teile des Arms abgeschnitten, als er sich ausdehnte.

Siehe den Pen Vue-controlled Wall-E von Sarah Drasner (@sdras) auf CodePen.

Damit hört es natürlich nicht auf, wir können diese Technik auf ausgefeiltere Effekte anwenden, wie zum Beispiel diese erstaunliche Röntgenmaschine von Noel Delgado

Siehe den Pen X-ray me (SVG Experiment) von Noel Delgado (@noeldelgado) auf CodePen.

Maskierung

Betrachten Sie Masking als eine Möglichkeit, komplexe, detaillierte Formen mit variabler Deckkraft über ein anderes Element zu legen. Dies kann zu wirklich schönen visuellen Effekten und performanten Alternativen zu anderen Techniken führen. Zum Beispiel kann die Animation von Verläufen sehr CPU-intensiv sein. Aber in der Grafik unten animieren wir die Maske anstelle des Verlaufs, um den gleichen visuellen Effekt zu erzielen, und das ist wesentlich weniger aufwendig.

Siehe den Pen Animating transparent mask von Sarah Drasner (@sdras) auf CodePen.

Da SVG Text unterstützt und jedes Teil editierbar ist, können wir auch interessante Effekte erstellen, um Teile von Daten, die sich ändern, ein- und auszublenden. Schauen Sie sich diese Demo von Craig Roblewsky an

Siehe den Pen Quick Tip: Invert SVG text fill color with masks von Craig Roblewsky (@PointC) auf CodePen.

Im Gegensatz zu Clipping berücksichtigt Masking Strich- und Stricheffekte, aber denken Sie daran, dass in einer Maske Weiß als Bereich behandelt wird, der angezeigt wird, und Schwarz als Bereich, der maskiert wird, wobei Graustufen jeden entlang dieser Skala offenlegen.

Das bedeutet jedoch, dass Sie GIFs mit Weiß und Transparenz verwenden können, um Masken zu erstellen, die wirklich coole Effekte offenlegen

Siehe den Pen Gif masking in SVG von Sarah Drasner (@sdras) auf CodePen.

Ich habe alles gelernt, was ich lernen musste, um die obige Demo von Yoksel zu erstellen, der eine riesige Sammlung von Pens mit dieser Technik hat. Hier ist eine, die mir besonders gefällt mit einem Vogel und einem Farbverlauf und einer subtilen Textur im Hintergrund.

Siehe den Pen Rainbow bird von yoksel (@yoksel) auf CodePen.