Erinnern Sie sich, wie Sie als Kind Bilder aus Zeitschriften ausgeschnitten haben? Haben Sie sie auf Papier geklebt, um Ihre eigenen Collagen zu erstellen? Dieser Beitrag handelt vom Ausschneiden von Bildern im Web mithilfe der CSS-Eigenschaft clip-path. Wir werden besprechen, wie das Ausschneiden funktioniert und wie wir diese ausgeschnittenen Teile verwenden können, um einige interessante Effekte zu erzielen, indem wir diese ausgeschnittenen Teile mit dem Originalbild kombinieren.
Als Beispiel verwende ich das folgende Foto. Die Blume hebt sich vom Rest des Fotos ab. Sie ist ein natürlicher Brennpunkt, um den wir unsere Effekte ausschneiden und erstellen können.
Erstellung der SVG
Zuerst erstellen wir eine neue SVG-Datei und importieren unser Beispielbild. Sie benötigen eine Bildbearbeitungssoftware mit Vektorfähigkeiten für den Schnitt. Ich verwende Inkscape, einen kostenlosen Open-Source-Editor, aber Sie können dieselbe Methode, die in diesem Beitrag behandelt wird, mit anderen Anwendungen wie Adobe Illustrator oder sogar einem Online-Editor wie Vectr anwenden.
Beginnen wir damit, ein neues 100px quadratisches SVG-Dokument im Bildeditor zu erstellen. Es ist wichtig, ein 100px Quadrat zu verwenden, da Clipping-Pfade in Längenprozenten angegeben werden. Die Wahl einer Skala von 0-100 ermöglicht eine nahtlose Umwandlung von Pixel in Prozent.
Eine Sache, die ich vor Beginn als sehr wertvoll erachte, ist die Untersuchung des SVG-Code-Outputs des Editors. Das Erhalten dieses Outputs hängt von der Anwendung ab. Zum Beispiel gibt es allein in Illustrator zwei Methoden. Das Betrachten des Markups gibt uns Einblick, was der Editor im Hintergrund tut, denn nicht alle Anwendungen exportieren SVG auf die gleiche Weise. Das Sehen des Codes wird Ihr Verständnis des Markups erhöhen. Es ist ein Win-Win.
Der SVG-Output sollte uns etwas wie folgt ergeben
<svg … width="100px" height="100px" viewBox="0 0 100 100" …>
...
</svg>Einer der wichtigsten Teile des oben Genannten ist das Attribut viewBox, da es das interne Koordinatensystem des SVG-Dokuments darstellt. Hier ist eine detaillierte Erklärung, wie es funktioniert. Oben sehen wir, dass das Dokument die richtigen Proportionen hat, wobei width, height und viewBox alle von 0 bis 100 reichen.
Als Nächstes importieren wir das Bild. Hier möchten wir das Bild auf ein 100px Quadrat skalieren und es am Ursprung (0, 0) platzieren. Dies kann das Seitenverhältnis Ihres Bildes beeinträchtigen, es sei denn, Ihr Bild hat bereits eine quadratische Proportion. Unser Beispielbild ist das nicht. Das wird später bei der Anwendung von clip-path kein Problem sein.
Wenn wir uns den generierten Code noch einmal ansehen, sehen wir nun den Tag <image> innerhalb des SVG-Dokuments. Beachten Sie, dass preserveAspectRatio auf none gesetzt ist. Das sagt uns, dass die ursprünglichen Abmessungen des Bildes ignoriert werden.
<svg … width="100px" height="100px" viewBox=“0 0 100 100”>
...
<image … y="0" x="0" xlink:href=".../image-file-name.jpg" preserveAspectRatio="none" height="100"
width="100" … />
...
</svg>Maskieren der Bilddatei
Nun zum eigentlichen Ausschneiden des Bildes.
Das Konzept des Ausschneidens von Bildern nennt man Maskierung. Wenn Sie mit der Maskierung nicht vertraut sind, geht es im Wesentlichen darum, mit dem Zeichenstift ein geschlossenes Objekt um einen Bereich des Bildes zu zeichnen. Sie müssen kein Experte für Vektoreditoren sein, um dies zu tun. Es erfordert keine besonderen künstlerischen Fähigkeiten und kann in wenigen einfachen Schritten erfolgen.
Das Maskieren digitaler Bilder ist sehr ähnlich wie das Ausschneiden von Bildern aus echten Zeitschriften. Der im Vektoreditor erstellte Pfad ist derselbe, dem Sie mit einer Schere folgen würden. Wählen Sie das Zeichenstift-Werkzeug und beginnen Sie, den Umriss des Bildteils zu zeichnen, den Sie ausschneiden möchten. In diesem Fall ist es der zuvor hervorgehobene Blumen-Blickpunkt. Erstellen Sie unterwegs beliebig viele Punkte, um die Maske zu formen. Stellen Sie sicher, dass Sie den Pfad als letzten Schritt schließen.
Es ist wichtig, beim Schneiden nur spitze Knoten zu verwenden, da clip-path zum Zeitpunkt des Schreibens keine komplexen Formen wie Bezier-Kurven unterstützt. Es unterstützt nur einfache Formen wie Polygon, Kreis und Ellipse.
Wenn wir uns nun den SVG-Code ansehen, wird die Ausgabe einen Pfad mit allen Koordinaten der von Ihnen gezeichneten Form enthalten. Hier ist ein gekürztes Beispiel meiner Pfadausgabe
...
<path
d="m 52.843605,79.860084 -0.69448,1.767767 -0.883884,0 -1.26269,-1.578364 -0.757615,0.06314 -1.388959,-2.714785 -0.12627,-2.967323 -1.704632,2.525381 -1.136422,-0.126269 -0.505076,-2.841054 -1.515229,1.325825 -1.325825,-0.126269 -0.252538,-1.578363 -0.947018,-0.126269 -0.252538,-0.315673 -0.947018,0.126269 -0.69448,-0.757614 0.126269,-1.641498 -0.441942,-0.252538 -0.189403,-2.588516 -0.505077,-0.06314 -1.010152,0.568211 -0.568211,-1.452094 0.441942,-2.399112 -1.325825,-0.126269 -0.378808,-1.262691 0.378808,-2.08344 0.883883,-1.641498 -1.010152,-1.26269 0.505076,-1.957171 -1.452094,-1.010152 -0.378808,-1.010153 1.136422,-2.209709 -2.209709,-0.378807 -0.441941,-1.704632 0.631345,-2.020305 1.704632,-1.38896 -1.578363,-1.452094 0.568211,-2.462247 0.820749,-0.441942 0.126269,-1.515229 0.757614,-1.073287 0.441942,-1.515228 -0.505076,-1.38896 0,-2.272843 0.505076,-1.010153 1.136422,-0.505076 1.325825,0 0.06313,-0.568211 -0.947018,-2.08344 0.378807,-0.631345 0,-0.441942 1.073288,-0.69448 1.073287,0 0.56821,0.315673 -0.189403,-2.525381 0.189403,-0.883884 0.378808,0.757615 0.06313,-0.883884 0.378807,-0.378807 0.189404,-0.378807 0.126269,-2.08344 0.315673,0.06314 0,-0.568211 0.378807,-0.06313 1.199556,0.568211 0.505076,0.69448 0.252538,-2.08344 0.631346,-0.505076 0.631345,-0.568211 0.441942,-0.505076 0.252538,0.505076 0,-0.883883 1.262691,0.315673 0.820749,-1.894036 1.325825,1.136421 1.073287,-1.452094 0.820749,0.189403 1.010152,1.515229 0.505077,0.757615 0.631345,-1.452095 0.820749,-0.56821 0.820749,0.505076 0.378807,0.631345 0.820749,-0.189403 0.820749,0.947018 0,0.252538 0.69448,-0.126269 0.378807,0.631345 0.820749,0 0.568211,1.515229 0.378807,1.325825 0.505076,-0.189404 0.252538,0.441942 0.378808,0.126269 0.441941,2.08344 0,0.568211 0.505077,-0.126269 0,0.883883 0.694479,-0.252538 0.505077,0.505076 0.252538,0.947018 0,0.883884 0.315673,0 0.378807,0.631345 0.441941,0.631345 0.06314,1.515229 -0.378807,1.957171 -0.441942,1.767767 2.904189,-1.136422 0.252538,0.631345 0.126269,2.209709 -0.883884,1.830902 1.38896,0.378807 1.010153,1.199556 -0.378808,1.641498 -0.947018,1.767767 -0.505076,0.378807 0.69448,1.767767 1.010153,1.26269 0.378807,1.38896 -0.378807,1.515229 -0.568211,0.315673 -0.505077,1.010152 -1.452094,0.883884 0.189404,1.325825 0.315672,0.883883 -0.378807,1.38896 -1.388959,1.073287 -0.505077,0.126269 0,0.505077 -0.189403,1.830901 -1.010153,0.631345 0.820749,2.209709 -0.631345,1.452094 -1.641498,-0.189403 0.126269,1.578363 -0.315673,1.641498 -1.073287,0.505076 -0.378807,0.315673 -0.378807,0.883883 -0.252538,1.010153 0.06313,2.714785 -0.631345,0.631345 -1.578364,-0.883883 -0.757614,-1.262691 -0.189404,2.462247 0.189404,2.083439 -0.252538,2.588516 -0.441942,1.894036 -0.631345,0.631346 -0.631345,-0.189404 -0.820749,-0.883883 z"
/>
...Unten ist ein Video davon, wie ich die Blume ausschneide und das Ergebnis. Das Ausschneiden dauerte etwa zwei Minuten und das Ergebnis ist ziemlich anständig.
Hier ist mein Bild mit leichter Opazität auf der Maske, um die endgültige Form zu zeigen, die ausgeschnitten wurde
Konvertierung von SVG in CSS Clip Path
Nachdem wir nun die Maske haben, sehen wir uns an, wie wir von SVG zu clip-path gelangen. Das bedeutet, den Pfad-Deskriptor oder das Attribut d im SVG-Code zu konvertieren.
Bevor wir uns ansehen, wie die Konvertierung durchgeführt wird, sprechen wir ein wenig über die Gründe für die Verwendung von Clipping-Pfaden. Sie fragen sich vielleicht, warum wir überhaupt einen Clipping-Pfad erstellen? Warum nicht das Bild im Vektoreditor maskieren und ein vorgeschnittenes Bild exportieren? Das ist möglich und die Verwendung von Bildern ist wesentlich bequemer als die Arbeit mit riesigen Stücken CSS-Code. Aber es gibt zwei Hauptvorteile, wenn man den Clipping-Pfad wählt, wie ich sehe: Interaktivität und Komprimierung. SVG ist im Wesentlichen Code im DOM, der manipuliert werden kann, und es ist eine viel kleinere Dateigröße als ein Bitmap-Bild derselben Form.
Die Syntax für CSS-Clipping-Pfade ist gewissermaßen das Gegenteil von dem, was in SVG üblich ist. Paare sind durch Kommas getrennt und Leerzeichen trennen Koordinaten. Dies ist das genaue Gegenteil der SVG-Deskriptor-Syntax. Um die Konvertierung weiter zu erschweren, verwenden einige Formen nur absolute Koordinaten. SVG-Pfade sind flexibler, da sie beide Koordinatensysteme verwenden können.
Ich habe ein rudimentäres Node-Skript erstellt, das SVG-Pfade konvertiert. Es nimmt Pfade in relativen Koordinaten entgegen und gibt entsprechende Polygone mit CSS clip-path aus. Es verwendet Regex, um SVG-Dateien zu parsen. Fühlen Sie sich frei, es zu forken und zu verbessern. Eine offensichtliche Ergänzung wäre die Normalisierung von Proportionen. Die Hinzufügung der Normalisierung würde die Notwendigkeit beseitigen, nur quadratische Bilder beim Erstellen von Masken zu verwenden.
Hier ist das Ergebnis der Anwendung des Clip-Paths auf das Foto der Blume
Siehe den Pen Bilder ausschneiden von Mikael Ainalem (@ainalem) auf CodePen.
Tricks mit CSS Clip Path
Nachdem wir nun den ausgeschnittenen Teil haben, sehen wir uns an, was wir damit machen können.
Overlay-Effekt
Ein ziemlich guter Trick ist es, den ausgeschnittenen Teil über das Originalbild zu legen. Unten ist ein Pen, der die Idee des Überlagerns des ausgeschnittenen Teils über das Originalbild veranschaulicht. Er gibt Ihnen eine Vorstellung von der Positionierung und den beiden beteiligten verschiedenen Teilen. Das Vorhandensein dieser beiden verschiedenen Elemente gibt uns die Möglichkeit, separate Effekte auf den Vorder- bzw. Hintergrund anzuwenden.
Siehe den Pen Bilder ausschneiden #2 von Mikael Ainalem (@ainalem) auf CodePen.
Hervorhebungs-Effekt
Das Hervorheben von Teilen eines Bildes ist nicht nur visuell ansprechend. Es kann auch einen realen Einfluss auf das Benutzererlebnis Ihrer Website haben. Es ist nicht schwer, nützliche Szenarien zu finden, in denen Sie Teile eines Bildes auf einer Webseite hervorheben möchten. Das Hervorheben von markierten Personen auf einem Foto könnte ein Anwendungsfall sein. Ein anderer könnte das Hervorheben bestimmter Merkmale eines Produkts in einer Produktvorstellung sein. Ein dritter Fall könnte ein Foto einer Karte sein, auf der Sie Orte hervorheben möchten, um etwas zu erzählen. Das Hervorheben oder Betonen von UI-Teilen kann bei richtiger Anwendung ein starkes UX-Muster sein. Clipping-Pfade sind eine Möglichkeit, Highlights in Ihrer Benutzeroberfläche zu erzielen.
Zurück zum Foto der Blume können wir die Blume nun leicht hervorheben. Eine Möglichkeit, dies zu erreichen, ist die Abdunkelung des Hintergrunds hinter der Blume durch Verringerung ihrer Opazität.
Siehe den Pen Bilder ausschneiden #3 von Mikael Ainalem (@ainalem) auf CodePen.
Ein interessanter Hinweis ist, dass der Browser die Maske testen wird. Um es also etwas spielerischer zu gestalten, können wir den Hervorhebungseffekt beim Hovern der Blume auslösen. Eine Möglichkeit, dies zu tun, ist das Hinzufügen von JavaScript-Event-Handlern (addEventListener) und deren Anbindung an das maskierte Element. Das Setzen dieser Handler, um bei Ereignissen wie mouseenter und mouseout auszulösen, erfasst den Benutzer, der über die Blume fährt. Wir können sogar Klassen auf dem Hintergrundelement umschalten, um den Effekt auszulösen. Ein CSS-Opazitätsübergang ist im Wesentlichen das, was benötigt wird.
Siehe den Pen Bilder ausschneiden #4 von Mikael Ainalem (@ainalem) auf CodePen.
Nichts hindert uns daran, die obige Technik mehrmals im selben Bild wiederzuverwenden. Hier ist ein Beispiel für die Hervorhebung vieler Personen auf einem Foto. In diesem Fall gibt es mehrere überlagerte Ausschnitte.
Siehe den Pen clip-path highlight von Mikael Ainalem (@ainalem) auf CodePen.
Fading und Unschärfe-Effekte
Ein Effekt, den wir im letzten Jahr immer häufiger gesehen haben, sind unscharfe Hintergründe. Es ist eine Art umgekehrte Methode, um Vordergrundelemente hervorzuheben. Anstatt das Vordergrundelement selbst hervorzuheben, kann man denselben Effekt erzielen, indem man Hintergrundelemente unscharf macht. Diese Methode, Vordergrundelemente hervorzuheben, hat einen weiteren angenehmen Nebeneffekt: Das Element in Ihrem aktuellen Brennpunkt bleibt unberührt. Aber gleichzeitig wird es prominenter.
Der einfachste Weg, einen Unschärfe-Effekt zu erzielen, ist die Verwendung der CSS-Filter-Unschärfe. Der folgende Pen verwendet dieselbe JavaScript-Callback-Methode wie das vorherige Beispiel, um den Effekt beim Hovern auszulösen. Anstatt den Hintergrund abzudunkeln, wird er mit einem CSS-Filter-Übergang unscharf gemacht.
Siehe den Pen Bilder ausschneiden #9 von Mikael Ainalem (@ainalem) auf CodePen.
Ein Übergang mit dem CSS-Filter ist jedoch sehr leistungshungrig. Dies liegt am Shader, der auf der GPU läuft und zur Erzeugung des Unschärfe-Effekts verwendet wird. Das Animieren des CSS-Unschärfe-Filters ist im Allgemeinen keine gute Idee. Eine performantere Option ist die Wiederverwendung einer vorab gefilterten Version des Bildes und die Verwendung eines Cross-Fades. Mit anderen Worten, wir animieren die Opazität eines duplizierten Hintergrundbildes anstatt die Unschärfe zu animieren. Hier ist, wie das aussieht
Siehe den Pen Bilder ausschneiden #10 von Mikael Ainalem (@ainalem) auf CodePen.
Umriss
Eine weitere Option zur Verstärkung des ausgeschnittenen Elements ist die Verwendung eines Umriss-Effekts. Die Wiederverwendung der Maske ist eine einfache Möglichkeit, dies zu tun. Wenn wir die SVG zwischen den beiden Hauptelementen einfügen und eine leichte Skalierung (in diesem Fall 1.04) hinzufügen, lassen wir sie wie einen Umriss erscheinen.
Siehe den Pen Bilder ausschneiden #5 von Mikael Ainalem (@ainalem) auf CodePen.
Natürlich können wir den Umriss auch beim Hovern auslösen, wie wir es in den anderen Beispielen getan haben.
Siehe den Pen Bilder ausschneiden #6 von Mikael Ainalem (@ainalem) auf CodePen.
Die Kanten der Maske sind etwas rau, da die Maske binär ist. Eine Möglichkeit, die Kanten zu glätten, ist das Hinzufügen eines SVG-Filters. Hier ist ein Beispiel
Siehe den Pen Bilder ausschneiden #8 von Mikael Ainalem (@ainalem) auf CodePen.
Löcher schneiden
Was ist, wenn der Teil, den Sie ausschneiden möchten, Löcher hat? Was ist, wenn er Teile des Hintergrunds zeigt, die Sie ausschließen möchten?
Stellen Sie sich zum Beispiel vor, Sie möchten einen Donut ausschneiden. Dann möchten Sie, dass die Maske das Loch in der Mitte ausschließt. Wie schneiden Sie dann die Maske aus? Die clip-path-Spezifikation erlaubt keine mehreren Polygone, es sei denn, wir verwenden SVGs. Das bedeutet, es gibt keine Möglichkeit, mehr als eine Form auf einmal zu erstellen.
Nun, eine Möglichkeit, diese Löcher zu erstellen, ist die Verwendung sehr dünner Verbindungsstücke und das Zeichnen als eine einzige Form. Mit anderen Worten, wir können einen sehr dünnen Einschnitt vom Rand machen und das Loch ausschneiden. Dieser Pen veranschaulicht, wie es aussieht, wenn wir diese Verbindungsstücke sehr dünn machen.
Siehe den Pen Bilder ausschneiden #7 von Mikael Ainalem (@ainalem) auf CodePen.
Morphing Clip Paths
Um den Hervorhebungseffekt noch spielerischer zu gestalten, können wir den clip-path selbst tatsächlich morphen. Unten ist ein Beispiel für die Erstellung einer dynamischen Hervorhebung eines Schmetterlings in drei Aufnahmen. Die Hervorhebung wird beim Hovern zwischen den drei verschiedenen ausgeschnittenen Teilen gemorpht.
Siehe den Pen Bilder ausschneiden #11 von Mikael Ainalem (@ainalem) auf CodePen.
Doppelbelichtungs-Effekt
Ein weiterer interessanter Effekt, den wir mit clip-path erzielen können, ist eine Doppelbelichtung. Hier werden zwei Bilder in derselben Maske verschmolzen.
Siehe den Pen Doppelbelichtung von Mikael Ainalem (@ainalem) auf CodePen.
Browser-Unterstützung
Kann clip-path also in allen Browsern verwendet werden? Leider im Moment nicht! Wenn wir uns die caniuse-Tabelle ansehen, sieht sie zum Zeitpunkt des Schreibens ein bisschen wie eine Ampel aus.
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130 | 54 | Nein | 127 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 18.0 |
Zusammenfassung
Einige wichtige Punkte, die Sie hoffentlich aus diesem Beitrag mitnehmen:
- Die Verwendung von Clipping-Pfaden ist eine Möglichkeit, Teile Ihrer Bilder hervorzuheben
- Das Stapeln des ausgeschnittenen Teils über das Originalbild ermöglicht die Erstellung verschiedener Arten von Hervorhebungseffekten in Bildern
- Wir können das Hit-Testing des Browsers auf Masken nutzen, um interaktive Effekte auf ausgeschnittenen Teilen zu erzielen
- Die Eigenschaft
clip-patheröffnet UX-Muster, die Teile Ihrer Bilder hervorheben und Effekte um sie herum erstellen
Danksagungen
- Inkscape für die Vektorgrafikbearbeitung
- Unsplash für die in den Beispielen verwendeten lizenzfreien Bilder
- Github für das Repository, das für das Konvertierungsskript verwendet wird
- npm für die Rolle als Paketmanager für das Konvertierungsskript
- caniuse für Referenzen zur Browserunterstützung
- CodePen für das Hosting der in diesem Beitrag verwendeten Demos
Es scheint, dass der beste Anwendungsfall hier nicht abgedeckt ist: Bilder so zuschneiden, dass sie über unterschiedlichen, variierenden oder sich bewegenden Hintergründen funktionieren. Alle oben genannten Beispiele (Entschuldigung, dass ich ein Spielverderber bin) wären besser als Photoshop-artige Bearbeitungen und als tatsächliche Bilder hochgeladen. Oder als SVG zugeschnitten und damit erledigt. (d. h. keine Notwendigkeit, Dinge mit CSS zu komplizieren)
Ich liebe Clip-Path und habe es bereits in eine zukunftssichere Lösung für die Gestaltung von Breadcrumbs integriert. Und obwohl caniuse.com in Chrome eine eingeschränkte Unterstützung zeigt, funktioniert es dort genauso gut. :)
lol, ich habe die interaktiven Aspekte der Codepens nicht bemerkt, daher verstehe ich den Sinn Ihrer Beispiele jetzt etwas besser. :P
Diese Beispiele sind hervorragend. Vielen Dank.
was für eine Schönheit. Das hat mir so viele Ideen gegeben. Danke!
Warum JavaScript-Ereignisse für mouseenter und mouseout verwenden? CSS :hover ist viel einfacher!
Danke für den Hinweis! Ich mag die Idee, Lösungen in CSS zu finden, und habe das anfangs auch versucht. Allerdings habe ich für diesen Fall keine wirklich gute Lösung gefunden. Hier löst der ausgeschnittene Teil einen Effekt auf dem Hintergrundelement aus und nicht auf sich selbst. Es könnte vielleicht mit :hover + Geschwisterselektor + Z-Index-Fummelei gemacht werden. Am Ende habe ich mich für JS entschieden, da ich denke, dass Lesbarkeit ein wichtiger Aspekt der Demos in dem Artikel ist.
Könnte eine gute Idee für das Menü einer Bekleidungswebsite sein, auch wie der 'True Detective'-Effekt :)
Vielen Dank für die Beispiele!
Ich habe clip-path normalerweise als Bandbreiten- oder Ladesparer verwendet, da man so kein zweites zugeschnittenes Bild hochladen muss. Man verwendet einfach ein einzelnes Bild zweimal, eines zugeschnitten und das andere nicht. Von allen gezeigten interaktiven Effekten interessiert mich nur der Morph-Clip-Pfad.
Letztes Mal, als ich so etwas benutzte, trennte ich Elemente in Ebenen (wobei das Original intakt blieb) in Photoshop, exportierte dann diese Elemente als 24-Bit-PNGs (Größe reduziert mit PNGquant). Dann positionierte ich diese Elemente über dem Originalbild mit einem einfachen SASS-Mixin, bei dem Verhältnis und Position dynamisch in Prozent berechnet wurden (Sie erhalten eine Position des Ausschnitts in Photoshop, ebenso wie mit).
Danach können Sie so ziemlich alles ohne Clip-Path tun (Filter, Opazität usw.).
Hier ist ein SASS-Mixin, ersetzen Sie imageHeight und imageWidth durch Ihre eigenen. Ich gehe davon aus, dass ein solches Bild 100% der Breite des Elternteils hat, andernfalls müssen Sie auch das ersetzen.
Bringt uns wieder näher an das, was wir einst in Flash hatten :)