Un guide complet sur le découpage et le masquage en SVG

Le découpage et le masquage sont des fonctionnalités de SVG qui permettent de masquer totalement ou partiellement des parties d’un objet à l’aide de formes simples ou complexes. Au fil des ans, de nombreux développeurs ont exploité ces capacités et les ont poussés dans diverses directions. Dans cet article, nous examinerons quelques méthodes avancées, ainsi que des démonstrations montrant le découpage et le masquage avec beaucoup d’effet. Commençons!

Qu'est-ce que le découpage? Qu'est-ce que le masquage?

Répondons d'abord à cette question: quelle est la différence entre le découpage et le masquage? Nous allons examiner chacun d’entre eux afin de mieux comprendre. Sachez que même si la plupart des fonctionnalités décrites dans les spécifications fonctionnent actuellement, certaines ne le feront pas. Vérifiez toujours caniuse ainsi que vos propres tests dans le navigateur..

Coupure

Un tracé de détourage est un objet dans lequel tout le contenu de la forme définie est visible, tandis que la partie extérieure est «découpée» et n'apparaît pas sur le canevas.

Un tracé de détourage

Dans l'exemple d'image ci-dessus, notre forme (le logo Envato) est l'objet que nous allons utiliser comme objet de chemin de clip. Le résultat est découpé dans l’arrière-plan uni, ne laissant qu’une forme dure sous la forme de notre «zone de découpage»..

Le masquage

Nous prenons ici un objet graphique ou une forme qui sera peint sur le fond à travers un masque, masquant ainsi complètement ou partiellement des parties de l'objet..

Rien à voir avec Jim Carey

Pensez aux masques comme un moyen d’accepter la région visible déjà définie par la forme d’un objet. Dans ce scénario, notre masque est l’objet que nous souhaitons «extraire» de notre fond de couleur unie. Le résultat est une forme identique à celle de notre masque (c'est-à-dire la forme noire unie).

La distinction

Toujours confus quant à la différence? Il existe une distinction très subtile entre ces deux types d’options. Pensez à un tracé de détourage comme à un «masque dur» dans lequel l’objet découpé supprimé est une forme dépourvue de pixels transparents ou opaques. Un masque est constitué d’une forme ou d’une image dans laquelle chaque pixel présente divers degrés de transparence et d’opacité qui permettent de scruter ou de masquer des parties de manière très subtile..

Parlons maintenant de certains éléments et attributs qui permettent l’écrêtage et le masquage dans SVG.

clipPath

Un SVG clipPath accepte de nombreux attributs et types de modèles de contenu. Les types de modèles de contenu acceptés sont ceux tels que Titre, et la description avec d'autres types de balises de métadonnées. Il accepte également les tags d’animation SMIL tels que , , Formes SVG (cercle, rect, polygone, chemin) comprenant , , style, et >. Vous pouvez même avoir plusieurs clipPath définitions à l'intérieur d'un parent clipPath.

Voici un extrait utilisant les méta-tags, les formes SMIL et SVG:

UNE clipPath créé en SVG peut également être référencé à partir de CSS à l'aide du clip-path propriété comme celle-ci:

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

Ici, je fais référence au clip de notre précédent extrait SVG avec le url () fonction, et en passant la valeur id de notre clipPath. Il y a aussi la possibilité d'utiliser des images comme cible d'un clipPath:

L'image dans cet extrait utilise une forme SVG (cercle) comme objet de découpage. Le résultat est un cercle avec une image à l'intérieur. assez chic hein? Vous remarquerez peut-être aussi l'inclusion du style tag à l'intérieur clipPath. Tout 

Voici un autre extrait de code dans lequel j'utilise les propriétés CSS comme styles intégrés imbriqués dans masque référencer notre objet masquant et contrôler le mode d'éclairage à l'aide de la luminance (l'intensité de la lumière émise par la surface).

masque-image


Les auteurs peuvent définir un masque de différentes manières en SVG. La première consiste à utiliser l'attribut SVG mask = "url (# id-value)" normalement défini sur la cible dans votre SVG, et l’autre est masque-image. 

Juste comme masque, la masque-image La propriété accepte un identifiant tel que la valeur de l'identifiant de masque utilisé dans l'extrait de code ci-dessus. Si utilisé dans CSS, vous pouvez référencer le fichier SVG lui-même à l’aide de la fonction url mask-image: url (your-external-file.svg # valeur-the-mask-id). 

mode masque

Cette propriété détermine si le masque est traité comme un masque de luminance ou un masque alpha. Une valeur de alpha contrôle le degré de transparence autorisé par le masque et une valeur de luminance contrôle l'intensité de la lumière émise. Si vous décidez de définir cela comme attribut sur votre masque SVG, vous pouvez utiliser l'attribut type de masque directement sur le SVG masque élément, ou vous pouvez également utiliser mode masque défini dans CSS.

masqueUnités

Un peu comme clipPathUnits, masque a un attribut très similaire. Cet attribut de masquage aide à définir le système de coordonnées pour des attributs tels que x, y, largeur et hauteur. Si aucune valeur n'est présente, une valeur de objectBoundingBox est utilisé par défaut.


• userSpaceOnUse: Le système de coordonnées utilisateur pour l'élément référençant le 
• objectBoundingBox: Un cadre de sélection peut être considéré comme identique à celui du contenu de la  étaient liés à un “0 0 1 1”Viewbox.

maskContentUnits

Définit le système de coordonnées pour le contenu du masque. Juste comme masqueUnités, Il accepte aussi userSpaceOnUse ou objectBoundingBox comme une valeur. Si aucune valeur n'est transmise, une valeur de userSpaceOnUse est utilisé par défaut.

• userSpaceOnUse: Le système de coordonnées utilisateur pour l'élément référençant
• objectBoundingBox: Un cadre de sélection peut être considéré comme identique à celui du contenu de la  étaient liés à viewbox = "0 0 1 1".

Cas d'utilisation


Il existe des moyens très intelligents d'implémenter des masques et des chemins de clips dans votre travail actuel. 

Démo 1

Voici un exemple utilisant un contexte de chargement Slack-esque dans lequel nous donnons à l’utilisateur un sentiment de chargement perçu pour le contenu (hit) rediffusion en bas à droite pour voir l’effet).

Une fois les données de l'API obtenues, nous pouvons commencer à déployer du contenu. Ceci combine l'utilisation de dégradés CSS, d'animation CSS et de SVG clipPath. Les accessoires du créateur original Yacine qui ont déclenché ma démo mise à jour ci-dessus. Je dois souligner que pour aller dans cette direction, vous devez recréer l'aspect fictif de votre produit final à l'aide d'un éditeur SVG tel que Sketch pour créer la structure initiale..

Démo 2

Voici une autre approche astucieuse et artistique, tirée d'un stylo de Noel Delgado, illustrant des événements survolés à l'aide de découpage SVG:

Bien que JavaScript soit utilisé pour détecter la position de la souris, l’effet lui-même est en fait un fichier SVG. clipPath. Un effet merveilleux pour les sections de portefeuille présentant le travail, mais assurez-vous de créer des replis pour les scénarios où la souris n'est pas présente..

Démo 3

Je suis tombé sur cet effet il y a bien longtemps, utilisé sur horizon.io (je n'en ai plus) et j'ai réussi à l'isoler dans une démonstration sur CodePen..

C'est une approche très inventive utilisant clipPath et un peu de mouvement afin de montrer comment un dessin est transféré d'un appareil à un autre.

Démo 4

Parfois, simple est aussi efficace que complexe. Je suis un grand fan de typographie et dans cet exemple de Steven Sinatra, un masque SVG est utilisé pour aider à isoler le texte et à l'animer à la place (encore rediffusion). Une approche amusante qui peut être utilisée pour ces sections de héros bien connues.

Démo 5

J'ai choisi ce stylo parce que c'est un très bon cas d'utilisation pour le remplissage d'icônes dans des situations telles que des évaluations ou des articles / articles liés, et tout cela est fait avec un masque SVG.

Démo 6

Créée à l'origine par Dudley Storey, cette fourche de Shaw utilise un masque SVG pour isoler chaque skateur en vol stationnaire. À l’aide de votre souris, survolez chacune d’elles pour voir l’effet se produire. Assez cool hein?

Vouloir plus?

Que diriez-vous de quelque chose juste pour les funzies? Les affiches de films sont devenues plus fraîches grâce à Chase. Un exemple vraiment amusant et inventif de masques SVG et de filtres!

J'ai également créé une démo publique contenant d'autres exemples montrant comment configurer différents types de clips et de masques à l'aide d'une combinaison de scénarios, ainsi que des exemples supplémentaires à l'aide de SMIL..

Pensées Parting

Voilà; un récapitulatif et une analyse de l'écrêtage et du masquage dans SVG. Utilisez-vous ces types d’approches dans votre travail actuel? Vous avez une très bonne démonstration à faire sur les cas d’utilisation, ou vous avez simplement une opinion sur les choses en général? Postez vos commentaires ci-dessous et codage heureux!

Ressources

• Masquage CSS sur le W3C
• Langage d'intégration multimédia synchronisé (SMIL) sur le W3C
• L'élément 'animateTransform' sur le W3C
• SVG sur Envato Tuts+
  
• Animation d'éléments découpés dans SVG sur Smashing Magazine
• Utilisation du chemin de clip SVG pour changer la couleur d'un logo lors du défilement
• Survolez les effets avec SVG clipPath sur tympanus.net
  

Création de sites web