Una guida completa per tagliare e mascherare in SVG

Il ritaglio e il mascheramento sono una funzionalità di SVG che ha la capacità di nascondere completamente o parzialmente parti di un oggetto attraverso l'uso di forme semplici o complesse. Nel corso degli anni molti sviluppatori hanno preso queste abilità e le hanno spinte in varie direzioni. In questo articolo daremo un'occhiata ad alcuni metodi avanzati insieme a dimostrazioni che mostrano il ritaglio e il mascheramento con grande effetto. Iniziamo!

Cos'è il ritaglio? Cos'è il mascheramento?

Rispondiamo prima a questa domanda: qual è la differenza tra ritaglio e mascheratura? Daremo un'occhiata a ciascuno per ottenere una migliore comprensione. Tieni presente che mentre molte funzioni delineate nelle specifiche funzionano oggi, altre no. Controlla sempre caniuse e i tuoi test nel browser.

Ritaglio

Un tracciato di ritaglio è un oggetto in cui tutto ciò che è all'interno della forma definita è visibile, mentre la porzione esterna viene "ritagliata" e non viene visualizzata sulla tela

Un tracciato di ritaglio

Nell'immagine di esempio sopra, la nostra forma (il logo Envato) è l'oggetto che useremo come oggetto del percorso della clip. Il risultato è ritagliato dallo sfondo solido lasciando solo una forma rigida nella forma della nostra "regione di ritaglio".

mascheramento

Qui prendiamo un oggetto grafico o una forma che sarà dipinta sullo sfondo attraverso una maschera, in tal modo mascherando completamente o parzialmente le parti dell'oggetto.

Niente a che vedere con Jim Carey

Pensa alle maschere come un modo per accettare la regione visibile già definita dalla forma di un oggetto. In questo scenario la nostra maschera è l'oggetto che desideriamo "estrarre" dal nostro sfondo a tinta unita. Il risultato è una forma identica alla nostra maschera (cioè la forma nera solida).

La distinzione

Sei ancora confuso riguardo alla differenza? C'è una sottile distinzione tra questi due tipi di opzioni. Pensa a un tracciato di ritaglio come a una "maschera dura" in cui l'oggetto di ritaglio rimosso è una forma senza pixel trasparenti o opachi. Una maschera consiste in una forma o un'immagine in cui ogni pixel ha vari gradi di trasparenza e opacità che possono sbirciare, o nascondere porzioni in modo molto sottile.

Ora discutiamo di alcuni elementi e attributi che abilitano il clipping e il mascheramento in SVG.

clipPath

Un SVG clipPath accetta molti attributi e tipi di modelli di contenuto. I tipi di modelli di contenuto accettati sono quelli come titolo, e descrizione insieme ad altri tipi di tag dei meta-dati. Accetta anche tag di animazione SMIL come , , Forme SVG (cerchio, rect, poligono, sentiero) Compreso , , stile, e >. Puoi persino averne più clipPath definizioni all'interno di un genitore clipPath.

Ecco uno snippet che utilizza meta tag, forme SMIL e SVG:

UN clipPath creato in SVG può anche essere referenziato da CSS usando il clip-percorso proprietà in questo modo:

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

Qui sto facendo riferimento alla clip dal nostro precedente snippet SVG con il url () funzione e passando il valore id del nostro clipPath. C'è anche la possibilità di usare le immagini come obiettivo di a clipPath:

L'immagine in questo frammento utilizza una forma SVG (cerchio) come oggetto di ritaglio. Il risultato è un cerchio con un'immagine al suo interno; carino eh? Si può anche notare l'inclusione del stile tag all'interno clipPath. Qualunque 

Ecco un altro frammento di codice in cui utilizzo le proprietà CSS come stili incorporati nidificati all'interno maschera per fare riferimento al nostro oggetto di mascheramento e controllare la modalità di illuminazione utilizzando la luminanza (l'intensità della luce emessa dalla superficie).

maschera-image


Ci sono un paio di modi in cui gli autori possono definire una maschera in SVG. Il primo è attraverso l'uso dell'attributo SVG mascherare = "url (# id-value)" normalmente definito sul target all'interno del tuo SVG, e l'altro è maschera-image. 

Proprio come maschera, il maschera-image la proprietà accetta un identificatore come il valore dell'ID maschera utilizzato nello snippet di codice sopra. Se utilizzato all'interno dei CSS, puoi fare riferimento al file SVG stesso tramite la funzione url mask-image: url (your-external-file.svg # the-mask-id-value). 

maschera-mode

Questa proprietà determina se la maschera viene trattata come una maschera di luminanza o una maschera alfa. Un valore di alfa controlla il grado di trasparenza consentito dalla maschera e un valore di luminanza controlla l'intensità della luce emessa. Se si decide di definirlo come un attributo nella maschera SVG, è possibile utilizzare l'attributo maschera tipo direttamente su SVG maschera elemento, oppure puoi anche usarlo maschera-mode definito all'interno di CSS.

maskUnits

Molto simile clipPathUnits, la maschera ha un attributo molto simile. Questo attributo di mascheratura aiuta a definire il sistema di coordinate per attributi come x, y, larghezza e altezza. Se nessun valore è presente un valore di objectBoundingBox è usato di default.


• userSpaceOnUse: Il sistema di coordinate utente per l'elemento che fa riferimento a 
• objectBoundingBox: Un riquadro di delimitazione potrebbe essere considerato come se il contenuto del  erano legati a un "0 0 1 1"Viewbox.

maskContentUnits

Definisce il sistema di coordinate per i contenuti della maschera. Proprio come maskUnits, Accetta anche userSpaceOnUse o objectBoundingBox come valore Se non viene passato alcun valore, allora un valore di userSpaceOnUse è usato di default.

• userSpaceOnUse: Il sistema di coordinate utente per il riferimento agli elementi
• objectBoundingBox: Un riquadro di delimitazione potrebbe essere considerato come se il contenuto del  erano destinati a viewbox = "0 0 1 1".

Casi d'uso


Ci sono alcuni modi molto intelligenti per implementare maschere e percorsi di ritaglio nel tuo lavoro oggi. 

Demo 1

Ecco un esempio che utilizza un contesto di caricamento Slack in cui diamo all'utente una sensazione di carico percepito per il contenuto (hit replica nell'angolo in basso a destra per vedere l'effetto).

Una volta ottenuti i dati API, possiamo iniziare a distribuire i contenuti. Questo sta combinando l'uso di gradienti CSS, animazioni CSS e SVG clipPath. Puntelli al creatore originale Yacine che ha acceso la mia demo aggiornata qui sopra. Devo sottolineare che per andare in questa direzione è necessario ricreare l'aspetto segnaposto del prodotto finale utilizzando un editor SVG come Sketch per creare la struttura iniziale.

Demo 2

Ecco un altro approccio intelligente e artistico, tratto da una penna di Noel Delgado, che mostra gli eventi al passaggio del mouse usando il clipping SVG:

Mentre è in uso JavaScript per rilevare la posizione del mouse, l'effetto stesso è in realtà un SVG clipPath. Un effetto meraviglioso per le sezioni del portfolio che mostrano il lavoro, tuttavia assicurati di creare fallback per gli scenari in cui un mouse non è presente.

Demo 3

Ho riscontrato questo effetto molto tempo fa utilizzato su horizon.io (non più in giro) e sono riuscito a isolarlo in una demo su CodePen.

È un approccio molto creativo usando clipPath e qualche movimento per mostrare come un disegno si trasferisce da un dispositivo all'altro.

Demo 4

A volte semplice è altrettanto efficace quanto complesso. Sono un grande fan della tipografia e in questo esempio di Steven Sinatra viene utilizzata una maschera SVG per aiutare a isolare il testo e animarlo sul posto (di nuovo, dovrai colpire replica). Un approccio divertente che può essere utilizzato per le famose sezioni degli eroi.

Demo 5

Ho scelto questa penna perché è un ottimo strumento per riempire le icone in situazioni come valutazioni o gradire messaggi / articoli, ed è tutto fatto con una maschera SVG.

Demo 6

Originariamente creato da Dudley Storey, questo fork di Shaw utilizza una maschera SVG per isolare ogni skateboarder al passaggio del mouse. Usando il mouse, passa con il mouse su ciascuno di essi per vedere che l'effetto ha luogo. Molto carino eh?

Voglio di più?

Che ne dici di qualcosa solo per i funzies? I poster dei film sono diventati più belli grazie a Chase. Un esempio davvero divertente e originale di maschere SVG e filtri!

Ho anche creato una demo pubblica contenente ulteriori esempi che mostrano come impostare diversi tipi di clip e maschere usando una combinazione di scenari, insieme ad altri campioni usando SMIL.

Pensieri di separazione

Ecco qua; un riepilogo e analisi del ritaglio e del mascheramento in SVG. Stai usando questi tipi di approcci nel tuo lavoro oggi? Hai davvero una fantastica demo del caso d'uso da condividere, o hai solo un'opinione sulle cose in generale? Pubblica i tuoi commenti qui sotto e buon codice!

risorse

• Mascheratura CSS su W3C
• Sincronizzato Multimedia Integration Language (SMIL) su W3C
• L'elemento 'animateTransform' su W3C
• SVG su Envato Tuts+
  
• Animazione di elementi ritagliati in SVG su Smashing Magazine
• Usando il percorso clip SVG per cambiare il colore di un logo sullo scroll
• Effetti al passaggio del mouse con SVG clipPath su tympanus.net
  

Web design