Un ghid cuprinzător pentru tăiere și mascare în SVG

Decuparea și mascarea este o caracteristică a SVG care are capacitatea de a ascunde complet sau parțial porțiunile unui obiect prin utilizarea unor forme simple sau complexe. De-a lungul anilor, mulți dezvoltatori au luat aceste abilități și le-au împins în diferite direcții. În acest articol vom arunca o privire asupra unor metode avansate, împreună cu demo-uri care arată o tăiere și o mascare la un efect grozav. Să începem!

Ce este Clipping? Ce este mascarea??

Să răspundem mai întâi la această întrebare: care este diferența dintre tăiere și mascare? Vom analiza fiecare dintre ele pentru a înțelege mai bine. Fiți conștienți de faptul că, în timp ce majoritatea funcțiilor prezentate în caietul de sarcini funcționează astăzi, unii nu vor. Verificați întotdeauna dublu-caniuse, precum și testele proprii în browser.

Tăiere

O cale de tăiere este un obiect în care totul în forma definită este vizibil, în timp ce partea exterioară este "tăiată" și nu apare pe pânză

O cale de tăiere

În exemplul de mai sus, forma noastră (sigla Envato) este obiectul pe care îl vom folosi ca obiect al căii noastre de clip. Rezultatul este decupat din fundalul solid, lăsând doar o formă grea sub forma "zonei noastre de tăiere".

Mascarea

Aici luăm un obiect sau o formă grafică care va fi vopsită pe fundal printr-o mască, complet sau parțial mascând părțile obiectului.

Nu are nimic de-a face cu Jim Carey

Gândiți-vă la măști ca pe o modalitate de a accepta regiunea vizibilă deja definită de forma obiectului. În acest scenariu, masca noastră este obiectul pe care dorim să-l "extragem" din fundalul nostru solid de culoare. Rezultatul este o formă identică cu cea a măștii noastre (adică forma neagră solidă).

Distinctia

Încă confuză cu privire la diferența? Există o distincție foarte subtilă între aceste două tipuri de opțiuni. Gândiți-vă la o cale de tăiere ca o "mască tare" în cazul în care obiectul tăiere este îndepărtat este o formă fără pixeli transparenți sau opaci care prezintă. O mască constă dintr-o formă sau imagine în care fiecare pixel are grade diferite de transparență și opacitate care pot trece prin pereche sau pot ascunde porțiuni într-un mod foarte subtil.

Acum, să discutăm câteva elemente și atribute care permit tăierea și mascarea în SVG.

clipPath

Un SVG clipPath acceptă multe atribute și tipuri de modele de conținut. Tipurile de modele de conținut acceptate sunt cele cum ar fi titlu, și Descriere împreună cu alte tipuri de etichete meta date. De asemenea, acceptă etichete de animație SMIL, cum ar fi , , Formele SVG (cerc, RECT, poligon, cale) inclusiv , , stil, și >. Puteți avea chiar și mai multe clipPath definiții în interiorul unui părinte clipPath.

Iată un fragment utilizând metaetichetele, SMIL și SVG:

A clipPath create în SVG poate fi de asemenea referită din CSS folosind clip-cale astfel de proprietăți:

.element clip-path: url ("# meu-clip"); 

Aici fac referire la clipul din fragmentul anterior SVG al nostru URL-ul () funcția și trecerea valorii id al nostru clipPath. Există, de asemenea, opțiunea de a utiliza imaginile ca țintă a clipPath:

Imaginea din acest fragment folosește o formă SVG (cerc) ca obiect de tăiere. Rezultatul este un cerc cu o imagine în interiorul lui; destul de fantezie eh? De asemenea, puteți observa includerea stil în interiorul etichetei clipPath. Orice 

Iată un alt fragment de cod în care folosesc proprietățile CSS ca stiluri inline încorporate în interiorul masca pentru a face referire la obiectul mascat și pentru a controla modul de iluminare utilizând luminanța (intensitatea luminii emise de suprafață).

masca-imagine


Există câteva moduri în care autorii pot defini o mască în SVG. Primul este prin utilizarea atributului SVG masca = "url (# id-valoare)" în mod normal, definită pe țintă în SVG dvs., iar cealaltă este masca-imagine. 

Ca și cum masca, masca-imagine proprietatea acceptă un identificator, cum ar fi valoarea ID-ului mască utilizat în fragmentul de cod de mai sus. Dacă se utilizează în CSS, puteți face referire la fișierul SVG prin funcția url mască-imagine: url (fișierul dvs. extern-file.svg # valoarea-mask-id). 

masca-mode

Această proprietate determină dacă masca este tratată ca o mască de luminanță sau o mască alfa. O valoare de alfa controlează gradul de transparență pe care o permite masca și o valoare de luminanță controlează intensitatea luminii emise. Dacă decideți să definiți acest lucru ca atribut pe masca SVG, puteți utiliza atributul Tip mască direct pe SVG masca element, sau puteți utiliza, de asemenea masca-mode definită în CSS.

maskUnits

Mai mult ca clipPathUnits, masca are un atribut foarte similar. Acest atribut de mascare ajută la definirea sistemului de coordonate pentru atribute precum x, y, lățime și înălțime. Dacă nu este prezentă nicio valoare, o valoare de objectBoundingBox este utilizat în mod implicit.


• userSpaceOnUse: Sistemul de coordonate al utilizatorului pentru elementul care face referire la 
• objectBoundingBox: O cutie de margine ar putea fi considerată ca și în cazul în care conținutul  au fost legați de un "0 0 1 1"Cutie de vizualizare.

maskContentUnits

Definește sistemul de coordonate pentru conținutul măștii. Ca și cum maskUnits, De asemenea, acceptă userSpaceOnUse sau objectBoundingBox ca valoare. Dacă nu este transmisă nicio valoare, atunci o valoare de userSpaceOnUse este utilizat în mod implicit.

• userSpaceOnUse: Sistemul de coordonate al utilizatorului pentru referința elementelor
• objectBoundingBox: O cutie de margine ar putea fi considerată ca și în cazul în care conținutul  au fost obligați să viewbox = "0 0 1 1".

Utilizați cazuri


Există câteva moduri foarte inteligente în care puteți implementa măști și căi de clip în munca dvs. astăzi. 

Demo 1

Iată un exemplu care folosește un context de încărcare Slack-esque în care oferim utilizatorilor un sentiment de încărcare percepută pentru conținut (lovit rerun în colțul din dreapta jos pentru a vedea efectul).

După obținerea datelor API, putem începe să lansăm conținut. Aceasta combină utilizarea gradientelor CSS, a animației CSS și a SVG clipPath. Reacții către creatorul original Yacine care mi-a declanșat demo-ul actualizat de mai sus. Ar trebui să subliniez că, pentru a merge în această direcție, va trebui să recreați aspectul placeholder al produsului dvs. finit folosind un editor SVG cum ar fi Sketch pentru a crea structura inițială.

Demo 2

Iată o altă abordare inteligentă și artistică, luată dintr-un pix de Noel Delgado, care arată evenimente de hover folosind clipuri SVG:

Deși există JavaScript folosit pentru a detecta poziția mouse-ului, efectul în sine este de fapt un SVG clipPath. Un efect minunat pentru secțiunile de portofoliu care arată munca, cu toate acestea asigurați-vă că pentru a crea rezervări pentru scenarii în cazul în care un mouse nu este prezent.

Demo 3

Am trecut peste acest efect cu vârste înaintate pe orizont.io (nu mai sunt în jur) și am reușit să o izolez într-un demo pe CodePen.

Este o abordare foarte inventivă clipPath și o mișcare pentru a arăta cum se transferă un design de la un dispozitiv la altul.

Demo 4

Uneori simplu este la fel de eficient ca și complex. Sunt un mare fan al tipografiei și în acest exemplu de Steven Sinatra o mască SVG este folosită pentru a ajuta la izolarea textului și la animarea acestuia în loc (din nou, va trebui să loviți rerun). O abordare distractivă care poate fi folosită pentru acele secțiuni de erou cunoscute.

Demo 5

Am ales acest pix, deoarece este un caz de utilizare foarte mare pentru umplerea icoanelor în situații cum ar fi ratinguri sau posturi de posturi preferate și totul se face cu o mască SVG.

Demo 6

Inițial creat de Dudley Storey, această furcă de Shaw folosește o mască SVG pentru a izola fiecare skateboarder pe hover. Folosind mouse-ul, treceți peste fiecare pentru a vedea efectul să aibă loc. Destul de cool?

Vreau mai mult?

Ce zici de ceva doar pentru funzies? Afișările filmului tocmai au fost mai grave datorită lui Chase. Un exemplu foarte distractiv și inventiv al măștilor SVG și al filtrelor!

Am creat, de asemenea, o demo publică care conține alte exemple care arată cum să configurați diferite tipuri de clipuri și măști utilizând o combinație de scenarii, împreună cu eșantioane suplimentare utilizând SMIL.

Gânduri de împărțire

Acolo îl aveți; o analiză și analiză a tăierii și mascării în SVG. Utilizați aceste tipuri de abordări în munca dvs. astăzi? Au un demo foarte bun de utilizare a cazului, sau să aibă doar o opinie despre lucruri în general? Postați comentariile de mai jos și codificați fericit!

Resurse

• CSS Mascarea pe W3C
• Sincronizată limbă de integrare multimedia (SMIL) pe W3C
• Elementul "animateTransform" pe W3C
• SVG pe Envato Tuts+
  
• Animarea elementelor clipite în SVG pe revista Smashing
• Folosind calea clipului SVG pentru a schimba culoarea logo-ului pe defilare
• Returnați efectele cu clipul SVG pe tympanus.net
  

Web design