Introduction au SVG 2D en HTML5 9 – Introduction et application des masques et des compétences du didacticiel sur les éléments de masque_html5

Masques pris en charge par SVG

SVG prend en charge une variété d'effets de masque. Grâce à ces fonctionnalités, nous pouvons créer de nombreux effets sympas. Quant à savoir si le masque est appelé « masque » ou « masque » en chinois, nous ne le distinguerons pas ici, nous l'appelons masque.

Types de masques pris en charge par SVG :
1. Chemin de détourage (chemin de détourage)

Le chemin de détourage est un graphique composé de chemin, de texte ou de graphiques de base. Tous les graphiques situés dans le chemin de détourage sont visibles et tous les graphiques situés en dehors du chemin de détourage sont invisibles.
2. Masque/masque

Un masque est un conteneur qui définit un ensemble de formes et les utilise comme support semi-transparent pouvant être utilisé pour combiner des objets de premier plan et d'arrière-plan.
Une différence importante entre le chemin de détourage et les autres masques est que le chemin de détourage est un masque de 1 bit, ce qui signifie que l'objet couvert par le chemin de détourage est soit entièrement transparent (visible, situé à l'intérieur du chemin de détourage), soit entièrement opaque (invisible, en dehors du chemin de détourage). Le masque peut spécifier la transparence à différents endroits.

Chemin du clip de la fenêtre - Propriétés du débordement et du clip

L'attribut overflow et l'attribut clip de l'élément HTML définissent conjointement le comportement de découpage du contenu de l'élément. De même, en SVG, ces deux attributs peuvent également être utilisés.

overflow = visible | caché | scroll | auto | hériter
L'attribut overflow définit le comportement à adopter lorsque le contenu de l'élément dépasse la bordure de l'élément.

Cet attribut peut être utilisé pour les éléments pouvant créer de nouvelles fenêtres (svg, symbole, image, ForeignObject), des éléments de motif et de marqueur. La signification de la valeur de cet attribut est la suivante :
visible : Afficher tout le contenu, même si le contenu est déjà en dehors de la bordure de l'élément, c'est la valeur par défaut.
masqué : masquer le contenu au-delà du chemin de détourage. Le chemin de détourage est spécifié par la propriété clip.
défilement : utilisez la forme d'une barre de défilement pour présenter le contenu excédentaire.
auto : utilisez le comportement défini par le navigateur, cela ne semble pas fiable.
Cet attribut est fondamentalement le même que l'attribut du même nom en CSS2, sauf qu'en SVG, il existe des processus de traitement différents :
1. L'attribut overflow est destiné aux éléments autres que la création de nouvelles fenêtres (svg, symbol, image, ForeignObject), les éléments autres que les éléments de motif et de marqueur n'ont aucun effet.
2. Le chemin de détourage correspond à la fenêtre Lorsqu'une nouvelle fenêtre est créée, un nouveau chemin de détourage est créé. Le chemin de détourage par défaut est la limite de la fenêtre.
clip = auto |
Cet attribut peut être utilisé pour les éléments pouvant créer de nouvelles fenêtres (svg, symbole, image, ForeignObject), des éléments de motif et de marqueur. Cette propriété a les mêmes paramètres que la propriété CSS2 du même nom. auto signifie que le chemin de détourage est cohérent avec la bordure de la fenêtre. Lorsque vous utilisez des graphiques comme paramètres (définition des valeurs haut, droite, bas et gauche du rectangle de recadrage), vous pouvez utiliser les valeurs de coordonnées utilisateur (c'est-à-dire des coordonnées sans unités). Par exemple :

Copier le codeLe code est le suivant :

P { clip : rect(5px, 10px, 10px, 5px);
Notez ici que par défaut (le débordement et le clip ont des valeurs par défaut), le chemin de détourage est cohérent avec la bordure de la fenêtre. Lorsque viewBox etpreserveAspectRatio sont définis, il est généralement nécessaire de mapper les quatre côtés du chemin de détourage sur les quatre côtés de viewBox, afin de garantir que certains effets d'affichage sont toujours les mêmes (bien sûr, s'ils sont tous des valeurs par défaut , il n'est pas nécessaire de les définir).

Le chemin de détourage de l'objet - élément clipPath
Le chemin de détourage est défini à l'aide de l'élément clipPath puis référencé à l'aide de l'attribut clip-path.
clipPath peut contenir des éléments de chemin, des éléments de texte, des éléments graphiques de base (cercle, etc.) et des éléments d'utilisation. S'il s'agit d'un élément use, il doit faire directement référence à un chemin, du texte ou des éléments graphiques de base, et ne peut pas faire référence à d'autres éléments.
Notez que le chemin de détourage n'est qu'un calque de masque d'un bit, le chemin est l'union de tous les éléments qu'il contient. Les objets de cette collection peuvent être affichés, les objets ne faisant pas partie de cette plage ne seront pas affichés. L'algorithme qui détermine si le point de décision spécifique se situe dans la plage est spécifié par l'attribut "clip-rule".

Pour les objets graphiques, le chemin de détourage est égal à l'union du chemin de détourage défini par son propre chemin de détourage et des chemins de détourage de tous les éléments externes (y compris les chemins de détourage définis par le chemin de détourage et le débordement). Notez quelques points :
1. L'élément clipPath lui-même n'hérite pas du chemin de détourage défini par clipPath du nœud externe.
2. L'élément clipPath lui-même peut définir l'attribut clip-path. L'effet est l'intersection de deux chemins.
3. Les éléments enfants de l'élément clipPath peuvent définir l'attribut clip-path : l'effet est l'union des deux chemins.
4. Un chemin de détourage vide coupera tout le contenu de l'élément.
Jetons un coup d'œil à plusieurs attributs importants :
clipPathUnits = "userSpaceOnUse(Valeur par défaut) | objectBoundingBox"
Cet attribut définit les coordonnées utilisées par le clipPath element System, ces deux valeurs que nous connaissons tous, sont le système de coordonnées utilisateur de l'élément qui fait référence au chemin de détourage actuel et à la valeur de l'échelle du cadre de délimitation.
L'élément clipPath n'est jamais rendu directement, mais est référencé via clip-path, donc la définition de l'attribut d'affichage de l'élément clipPath n'a aucun effet.
clip-path = "nom du chemin de détourage)> | aucun héritage"
Inutile de dire que cet attribut est utilisé pour référencer le détourage path , il convient de noter ici que tous les éléments conteneurs, éléments graphiques de base et éléments clipPath peuvent utiliser cet attribut.
clip-rule = "nonzero(Valeur par défaut) | evenodd | hériter"
Cet attribut est utilisé pour déterminer quels points appartiennent aux points à l'intérieur du chemin de détourage. Pour les formes fermées simples, cela est facile à déterminer, mais pour les formes complexes avec des trous à l'intérieur, il y a une différence. La valeur de cet attribut a la même signification que la valeur de fill-rule :
différent de zéro : L'algorithme utilisé pour cette valeur est : émettre une ligne dans n'importe quelle direction à partir du point à déterminer, puis calculer la direction du intersection du graphique et du segment de ligne ; Le résultat du calcul commence à 0, et chaque fois qu'un segment de ligne à une intersection est de gauche à droite, ajoutez 1 à chaque fois qu'un segment de ligne à une intersection est de droite à gauche ; 1 ; après avoir calculé toutes les intersections, si le résultat de ce calcul n'est pas égal à 0, alors le point est dans le graphique et doit être rempli ; si la valeur est égale à 0, alors le point est en dehors du graphique et ne le fait pas ; doivent être remplis. Regardez l'exemple ci-dessous :

pair impair : L'algorithme utilisé pour cette valeur est le suivant : lancer une ligne dans n'importe quelle direction à partir du point à déterminer, puis calculer le nombre d'intersections entre le graphique et le segment de ligne si le nombre. est un nombre impair, changer le point dans le graphique. Un remplissage est requis ; si le nombre est un nombre pair, les points sont en dehors du graphique et n'ont pas besoin d'être remplis. Regardez l'exemple ci-dessous :

L'attribut clip-rule ne peut être utilisé que sur les éléments graphiques internes de l'élément clipPath. Par exemple, les paramètres suivants fonctionnent :

Copier le code

Le code est le suivant :

Cela ne fonctionnera pas si l'élément n'est pas dans le clipPath. Par exemple, les paramètres suivants ne fonctionneront pas :

Copiez le code

Le code est le suivant :

< ;/clipPath>

Regardez enfin un petit exemple du chemin de détourage :

Copiez le code

Le code est le suivant :

Seule la zone 10*10 dans le coin supérieur gauche du rectangle est visible.

Masque - élément de masque
En SVG, vous pouvez spécifier n'importe quel élément graphique ou élément g comme masque pour l'objet rendu afin de combiner les objets rendus dans l'arrière-plan. .
Le masque est défini avec l'élément masque. Lors de l'utilisation du masque, il vous suffit de référencer le masque dans l'attribut masque de l'objet.
L'élément masque peut contenir n'importe quel élément graphique et élément conteneur (tel que g).
En fait, tout le monde connaît l'effet du masque. Il calcule essentiellement une transparence finale basée sur la couleur et la transparence de chaque point du masque, puis lors du rendu de l'objet, masquez-la avec une transparence différente sur l'objet. Le calque de masque reflète l'effet de blocage du masque. Pour le rendu des objets, seules les parties à l'intérieur du masque seront rendues en fonction de la transparence des points sur le masque, et les parties hors du masque ne seront pas affichées. Regardez l'exemple ci-dessous :

Copiez le code

Le code est le suivant :

xmlns="http://www.w3.org/2000/svg" xmlns:xlink ="http:/ /www.w3.org/1999/xlink">

x1="0" y1 ="0" x2 ="800" y2="0">



x ="0" y ="0" width="800" height="300">


font-family="Verdana" font- size="100" text-anchor="middle" >
Texte masqué