Een uitgebreide gids voor clippen en maskeren in SVG

Knippen en maskeren is een functie van SVG die gedeelten van een object geheel of gedeeltelijk kan verbergen door het gebruik van eenvoudige of complexe vormen. In de loop van de jaren hebben vele ontwikkelaars deze vaardigheden genomen en ze in verschillende richtingen geduwd. In dit artikel zullen we enkele geavanceerde methoden bekijken, samen met demo's die het knippen en maskeren met groot effect presenteren. Laten we beginnen!

Wat is Clipping? Wat is maskeren?

Laten we eerst deze vraag beantwoorden: wat is het verschil tussen knippen en maskeren? We gaan een kijkje nemen in elk om een ​​beter begrip te krijgen. Houd er rekening mee dat, hoewel de meeste functies die in de specificatie worden beschreven, vandaag werken, sommige niet werken. Controleer altijd caniuse en uw eigen tests in de browser.

knipsel

Een uitknippad is een object waarbij alles binnen de gedefinieerde vorm zichtbaar is, terwijl het buitenste gedeelte is "uitgeknipt" en niet op het canvas verschijnt

Een uitknippad

In de voorbeeldafbeelding hierboven is onze vorm (het Envato-logo) het object dat we zullen gebruiken als ons clippad-object. Het resultaat is uitgesneden van de effen achtergrond waardoor er slechts een harde vorm overblijft in de vorm van ons "knipgebied".

masking

Hier nemen we een grafisch object of een vorm die op de achtergrond wordt geschilderd door een masker, waardoor delen van het object geheel of gedeeltelijk worden gemaskeerd.

Niets te maken met Jim Carey

Denk aan maskers als een manier om het zichtbare gebied te accepteren dat al is gedefinieerd door de vorm van een object. In dit scenario is ons masker het object dat we willen "extraheren" uit onze effen achtergrondkleur. Het resultaat is een vorm die identiek is aan ons masker (dat wil zeggen de effen zwarte vorm).

Het onderscheid

Nog steeds verward over het verschil? Er is een heel subtiel onderscheid tussen deze twee soorten opties. Beschouw een uitknippad als een "hard masker" waarbij het verwijderde uitknipobject een vorm is zonder doorzichtige of ondoorzichtige pixels. Een masker bestaat uit een vorm of afbeelding waarbij elke pixel verschillende graden van transparantie en ondoorzichtigheid heeft die doorheen kunnen turen of delen op een zeer subtiele manier kunnen verbergen.

Laten we nu enkele elementen en attributen bespreken die het knippen en maskeren in SVG mogelijk maken.

clipPath

Een SVG clipPath accepteert veel kenmerken en inhoudsmodeltypen. De soorten geaccepteerde inhoudsmodellen zijn die zoals titel, en Omschrijving samen met andere soorten metadatatags. Het accepteert ook SMIL-animatietags zoals , , SVG-vormen (cirkel, rect, veelhoek, pad) inclusief , , stijl, en >. Je kunt zelfs meerdere hebben clipPath definities binnen een ouder clipPath.

Hier is een fragment met behulp van metatags, SMIL- en SVG-vormen:

EEN clipPath gemaakt in SVG kan ook naar CSS worden verwezen met behulp van de clip-path eigendom zoals zo:

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

Hier verwijs ik naar de clip van ons eerdere SVG-fragment met de url () functie en het doorgeven van de id-waarde van onze clipPath. Er is ook de mogelijkheid om afbeeldingen te gebruiken als doelwit van een clipPath:

De afbeelding in dit fragment gebruikt een SVG-vorm (cirkel) als het uitknipobject. Het resultaat is een cirkel met een afbeelding erin; best mooi, toch? U ziet mogelijk ook de opname van de stijl tag binnen clipPath. Ieder 

Hier is nog een codefragment waarin ik CSS-eigenschappen gebruik als inline-stijlen die zijn genest in masker om naar ons maskerende object te verwijzen en de verlichtingsmodus te regelen met behulp van luminantie (de intensiteit van het licht dat door het oppervlak wordt uitgezonden).

mask-afbeelding


Er zijn een aantal manieren waarop auteurs een masker in SVG kunnen definiëren. De eerste is door het gebruik van het SVG-kenmerk masker = "url (# id-value)" normaal gedefinieerd op het doelwit in uw SVG, en de ander is mask-afbeelding. 

Net als masker, de mask-afbeelding eigenschap accepteert een ID, zoals de waarde van de masker-ID die wordt gebruikt in het bovenstaande codefragment. Als je het gebruikt in CSS, kun je via de url-functie naar het SVG-bestand zelf verwijzen mask-image: url (your-external-file.svg # the-mask-id-value). 

mask-mode

Deze eigenschap bepaalt of het masker wordt behandeld als een luminantiemasker of een alfamasker. Een waarde van alpha bepaalt de mate van transparantie die het masker toestaat, en een waarde van luminantie regelt de intensiteit van het uitgestraalde licht. Als u besluit dit als attribuut op uw SVG-masker te definiëren, kunt u het attribuut gebruiken mask-type rechtstreeks op de SVG masker element, of u kunt ook gebruiken mask-mode gedefinieerd binnen CSS.

maskUnits

Net als clipPathUnits, masker heeft een zeer vergelijkbaar kenmerk. Dit maskeringskenmerk helpt bij het definiëren van het coördinatensysteem voor kenmerken zoals x, y, breedte en hoogte. Als er geen waarde aanwezig is, is een waarde van objectBoundingBox wordt standaard gebruikt.


• userSpaceOnUse: Het gebruikerscoördinatensysteem voor het element dat verwijst naar de 
• objectBoundingBox: Een selectiekader kan worden beschouwd als hetzelfde als de inhoud van het  waren gebonden aan een "0 0 1 1"Viewbox.

maskContentUnits

Definieert het coördinatensysteem voor de inhoud van het masker. Net als maskUnits, Het accepteert ook userSpaceOnUse of objectBoundingBox als een waarde. Als er geen waarde wordt doorgegeven, dan is een waarde van userSpaceOnUse wordt standaard gebruikt.

• userSpaceOnUse: Het gebruikerscoördinatensysteem voor het verwijzen naar het element
• objectBoundingBox: Een selectiekader kan worden beschouwd als hetzelfde als de inhoud van het  waren gebonden aan viewbox = "0 0 1 1".

Use Cases


Er zijn enkele zeer slimme manieren om maskers en clippaden in uw werk vandaag te implementeren. 

Demo 1

Hier is een voorbeeld met een Slack-achtige laadcontext waarin we de gebruiker het gevoel geven dat hij inhoud laadt (hit herhaling in de rechter benedenhoek om het effect te zien).

Zodra de API-gegevens zijn verkregen, kunnen we inhoud gaan uitrollen. Dit combineert het gebruik van CSS-gradiënten, CSS-animatie en SVG clipPath. Rekwisieten naar de originele maker Yacine die mijn bijgewerkte demo hierboven heeft aangewakkerd. Ik wil erop wijzen dat, om deze richting uit te gaan, u de tijdelijke aanduiding van uw eindproduct opnieuw moet maken met een SVG-editor zoals Sketch om de oorspronkelijke structuur te maken.

Demo 2

Hier is nog een slimme en artistieke benadering, overgenomen van een pen door Noel Delgado, met hover-evenementen met SVG-clipping:

Hoewel er JavaScript wordt gebruikt om de positie van de muis te detecteren, is het effect zelf in feite een SVG clipPath. Een prachtig effect voor portfoliodelen die werk presenteren, maar zorg wel voor fallbacks voor scenario's waarbij een muis niet aanwezig is.

Demo 3

Ik heb dit effect eeuwen geleden tegengekomen, gebruikt op horizon.io (niet langer in de buurt) en erin geslaagd om het te isoleren in een demo op CodePen.

Het is een zeer inventieve aanpak met clipPath en een beweging om te laten zien hoe een ontwerp van het ene naar het andere apparaat wordt overgezet.

Demo 4

Soms is eenvoud net zo effectief als complex. Ik ben een grote fan van typografie en in dit voorbeeld van Steven Sinatra wordt een SVG-masker gebruikt om de tekst te isoleren en op zijn plaats te animeren (nogmaals, je zult moeten klikken herhaling). Een leuke aanpak die kan worden gebruikt voor de bekende hero-secties.

Demo 5

Ik koos voor deze pen omdat het een heel handig gebruik is om pictogrammen te vullen in situaties zoals beoordelingen of berichten / items leuk vinden, en het is allemaal gedaan met een SVG-masker.

Demo 6

Oorspronkelijk gemaakt door Dudley Storey, gebruikt deze vork van Shaw een SVG-masker om elke skateboarder te isoleren tijdens het zweven. Beweeg met uw muis over elke muis om te zien welk effect optreedt. Best cool he?

Meer willen?

Hoe zit het met iets alleen voor funzies? Filmposters zijn dankzij Chase gewoon cooler geworden. Een heel leuk en inventief voorbeeld van SVG-maskers en ook filters!

Ik heb ook een openbare demo gemaakt met verdere voorbeelden die laten zien hoe verschillende soorten clips en maskers kunnen worden ingesteld met behulp van een combinatie van scenario's, samen met aanvullende voorbeelden met SMIL.

Afscheid nemen van gedachten

Daar heb je het; een overzicht en analyse van knippen en maskeren in SVG. Gebruik je dit soort benaderingen vandaag nog in je werk? Heb je een geweldige casemdemo om te delen, of heb je gewoon een mening over dingen in het algemeen? Plaats hieronder uw opmerkingen en blije codering!

Middelen

• CSS maskeren op W3C
• Gesynchroniseerde Multimedia Integration Language (SMIL) op W3C
• Het element 'animateTransform' op W3C
• SVG op Envato Tuts+
  
• Geanimeerde clips animeren in SVG op Smashing Magazine
• Het SVG-clippad gebruiken om de kleur van een logo tijdens het scrollen te wijzigen
• Zwevende effecten met SVG clipPath op tympanus.net
  

Web ontwerp