HTML5 SVG 2D Introduction 9 - Introduction et application des masques et des éléments de masque

Auteur：Eve Cole Date de mise à jour：2025-04-07 03:00:03

Masques soutenus par SVG

SVG prend en charge une variété d'effets du masque. En utilisant ces fonctionnalités, nous pouvons créer de nombreux effets éblouissants. Quant à savoir si le masque est appelé masque ou masque en chinois, il n'est pas différencié. Il s'appelle Mask ici.

Les types de masques soutenus par SVG:

1. Path de coupure

Un chemin d'écrêtage est un graphique composé de chemin, de texte ou de graphique de base. Tous les graphiques à l'intérieur du chemin de clip sont visibles et tous les graphiques à l'extérieur du chemin de clip sont invisibles.

2. Masque / masque

Un masque est un conteneur qui définit un ensemble de graphiques et les utilise comme support translucide qui peut être utilisé pour combiner des objets et des arrière-plans de premier plan.

Une différence importante entre un chemin d'écrêtage et d'autres masques est que le chemin d'écrêtage est un masque à 1 bits, ce qui signifie que l'objet couvert par le chemin de découpage est soit entièrement transparent (visible, situé à l'intérieur du chemin de coupure), soit complètement opaque (non visible, situé à l'extérieur du chemin de coupure). Et le masque peut spécifier la transparence à différents endroits.

Path de dérivation de la fenêtre - Propriétés de débordement et de clip

L'attribut Overflow et l'attribut Clip de l'élément HTML définissent conjointement le comportement de découpage de l'élément sur le contenu. De même, dans SVG, ces 2 propriétés peuvent également être utilisées.

débordement = visible | Caché | Faites défiler | Auto | hériter

L'attribut Overflow définit le comportement pris lorsque le contenu d'un élément dépasse la bordure de l'élément.

Cette propriété peut être utilisée pour les éléments (SVG, symbole, image, étrangère), motif et éléments de marqueur qui peuvent créer de nouvelles fenêtres. La valeur de cette propriété est la suivante:

Visible: affiche tout le contenu, même si le contenu est déjà en dehors de la bordure de l'élément, il s'agit de la valeur par défaut.

Hidden: Masquez le contenu au-delà du chemin d'écrêtage. Le chemin de clip est spécifié par la propriété Clip.

Scroll: sous la forme d'une barre de défilement, en présentant le contenu au-delà.

Auto: en utilisant un comportement défini par le navigateur, cela semble peu fiable.

Cette propriété est fondamentalement la même que la propriété du même nom dans CSS2, sauf que dans SVG, il existe des procédures de traitement différentes:

1. L'attribut Overflow n'a aucun effet sur des éléments autres que les éléments qui créent une nouvelle fenêtre (SVG, symbole, image, étrangère), modèle et éléments de marqueur.

2. Le chemin d'écrêtage correspond à la fenêtre. Si une nouvelle fenêtre est créée, un nouveau chemin d'écrêtage est créé. Le chemin d'élimination par défaut est la limite de la fenêtre.

Clip = <Commer> | Auto | hériter

La propriété clip est utilisée pour définir le chemin de clip de la fenêtre actuelle.

Cette propriété peut être utilisée pour les éléments (SVG, symbole, image, étrangère), motif et éléments de marqueur qui peuvent créer de nouvelles fenêtres. Cette propriété a les mêmes paramètres que la propriété avec le même nom dans CSS2. Auto signifie que le chemin d'écrêtage est cohérent avec la bordure de la fenêtre. Lorsque vous utilisez le graphique comme paramètre (réglage les valeurs de haut, à droite, en bas et à gauche du rectangle de recadrage), la valeur des coordonnées de l'utilisateur (c'est-à-dire les coordonnées sans unités) peut être utilisée. Par exemple:

P {clip: rect (5px, 10px, 10px, 5px); }

Notez ici que par défaut (débordement et clip sont tous deux des valeurs par défaut), le chemin de clip est cohérent avec la bordure de la fenêtre. Après avoir défini Viewbox et Preservaspectratio, vous devez généralement cartographier les quatre côtés du chemin de clip dans les quatre côtés de la Viewbox pour vous assurer que certains effets d'affichage sont les mêmes (bien sûr, s'ils sont toutes des valeurs par défaut, vous n'avez pas besoin de les définir).

Path de coupure à l'objet - élément clippat

Le chemin de clip 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 utiliser des éléments. S'il s'agit d'un élément d'utilisation, il doit se référer directement au chemin, au texte ou aux éléments graphiques de base, et d'autres éléments ne peuvent pas être référencés.

Notez que le chemin d'écrêtage n'est qu'une couche de masque d'un bit, qui est une union de tous les éléments contenus. Les objets de cette collection peuvent être affichés et les objets qui ne sont pas dans cette plage ne seront pas affichés. L'algorithme avec le point de jugement spécifique qui n'est pas dans la plage est spécifié par l'attribut de Rule Clip.

Pour les objets graphiques, le chemin de clip est égal à l'union du chemin de clip défini par lui-même avec les chemins de clip de tous les éléments extérieurs (y compris les chemins de clip définis par clip-chemin et débordement). Quelques points à noter:

1. L'élément Clippath lui-même n'hérite pas du chemin de clip défini par clippace à partir 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. L'attribut Clip-Path peut être défini pour les éléments enfants de l'élément Clippath: l'effet est une union de deux chemins.

4. Un chemin d'écrêtage vide coupera tous les contenus dans l'élément.

Voici quelques attributs importants:

ClippathUnits = userspaceOnUse ( par défaut ) | ObjectBoundingbox

Cet attribut définit le système de coordonnées utilisé par l'élément Clippath. Nous connaissons ces deux valeurs, à savoir le système de coordonnées de l'utilisateur qui utilise l'élément qui fait référence au chemin de clip actuel et à la valeur proportionnelle de la boîte de délimitation.

L'élément Clippath n'est jamais rendu directement et 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 = <url ( #clipping pathname )> | aucun hérité

Inutile de dire que cet attribut est utilisé pour se référer au chemin de coupure. Il convient de noter ici que tous les éléments de conteneur, les éléments graphiques de base et les éléments de clippat peuvent utiliser cet attribut.

Clip-Rule = non Zero ( par défaut ) | Evendd | hériter

Cette propriété est utilisée pour déterminer quels points appartiennent aux points à l'intérieur de la force d'écrêtage. C'est facile à juger pour des graphiques fermés simples, mais pour des graphiques complexes avec des trous à l'intérieur, il y a une différence. La valeur de cette propriété a la même signification que la valeur de la règle de remplissage:

Nonzero: l'algorithme utilisé pour cette valeur consiste à émettre des lignes du point à juger dans n'importe quelle direction, puis à calculer la direction du point d'intersection entre la figure et le segment de ligne; Le résultat du calcul commence à partir de 0, et chaque segment de ligne à une intersection est de gauche à droite, ajouter 1; Chaque segment de ligne à une intersection est de droite à gauche, soustrait 1; Après avoir calculé tous les points d'intersection de cette manière, si le résultat de ce calcul n'est pas égal à 0, le point est sur la figure et doit être rempli; Si la valeur est égale à 0, elle n'a pas besoin d'être remplie à l'extérieur de la figure. Voir l'exemple suivant:

MELASODD: L'algorithme utilisé pour cette valeur consiste à émettre des lignes du point qui doit être jugée dans n'importe quelle direction, puis de calculer le nombre de points auxquels la figure et l'intersection du segment de ligne. Si le nombre est impair, le point est transformé en figure et doit être rempli; Si le nombre est uniforme, le point est en dehors du chiffre et n'a pas besoin d'être rempli. Voir l'exemple de la figure ci-dessous:

L'attribut de Rule Clip ne peut être utilisé que pour les éléments graphiques internes de l'élément Clippath. Par exemple, les paramètres suivants fonctionnent:

<g>

</clippath>

</g>

Cela ne fonctionne pas si l'élément n'est pas dans Clippath. Par exemple, les paramètres suivants ne fonctionnent pas:

</clippath>

</g>

Enfin, regardons un petit exemple du chemin d'écrêtage:

<SVG>

<g>

</clippath>

</g>

</svg>

Seule la zone du coin supérieur gauche du rectangle est visible.

Masque - élément de masque

Dans SVG, vous pouvez affecter n'importe quel élément graphique ou élément G en tant que masque à l'objet rendu pour combiner l'objet rendu en arrière-plan.

Le masque est défini par l'élément de masque. Lorsque vous utilisez le masque, il vous suffit de référencer le masque dans l'attribut de masque de l'objet.

L'élément de masque peut contenir n'importe quel élément graphique et élément de conteneur (par exemple G).

En fait, tout le monde est clair sur l'effet du masque. Fondamentalement, il s'agit de calculer une transparence finale basée sur la couleur et la transparence de chaque point du masque. Ensuite, lors du rendu de l'objet, une couche de masque avec une transparence différente est couverte sur l'objet, reflétant l'effet de masquage du masque. Pour le rendu des objets, seules les pièces à l'intérieur du masque seront rendues en fonction de la transparence des points sur le masque, et les pièces à l'extérieur du masque ne seront pas affichées. Voir l'exemple suivant:

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

<defs>

<lineargradient id = "gradient" gradientUnits = "UserspaceOnuse"

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

</ lineargradient>

<mask id = "mask" maskunits = "userspaceonuse"

x = "0" y = "0">

</ mask>

<text id = "text" x = "400" y = "200"

font-family = "verdana" font-size = "100" text-anchor = "middle">

Texte masqué

</Text>

</fs>

<! - L'arrière-plan de la fenêtre ->

<! - La première étape consiste à dessiner un texte avec un masque, et vous pouvez voir que l'effet de transparence du masque a été appliqué aux mots.

La deuxième étape consiste à dessiner un texte sans masque comme contour du texte dans la première étape ->

</svg>

L'effet est illustré dans la figure ci-dessous:

Vous pouvez essayer de modifier la largeur de l'élément REct dans l'élément de masque ci-dessus en 500. Vous verrez qu'une partie du texte ne s'affiche pas, car cette partie a dépassé la portée du masque. Comme vous pouvez réellement le voir ici, le chemin d'écrêtage ci-dessus n'est qu'un masque spécial (la transparence de chaque point est soit 0 ou 1).

La définition et l'utilisation de masques ont été introduites. Jetons un coup d'œil à plusieurs attributs importants:

maskunits = userspaceonuse | ObjectBoundingbox (par défaut)

Un système de coordonnées qui définit les coordonnées (x, y) et la longueur (largeur, hauteur) dans un élément de masque: un système de coordonnées utilisateur qui fait référence à l'élément du masque, ou une valeur relative de la boîte de délimitation par rapport à l'élément du masque référencé. La signification de cette valeur est la même que la signification de l'unité dans le chapitre précédent.

maskConTentunits = userspaceonuse (par défaut) | ObjectBoundingbox

Définit le système de coordonnées des éléments enfants dans l'élément de masque.

x, y, largeur, hauteur

La position et la taille du masque sont définies. Selon les coordonnées par défaut d'objet-Foundingbox, les valeurs par défaut sont de -10%, -10%, 120% et 120%.

Remarque également : le masque ne sera pas rendu directement, il ne fonctionnera que dans les lieux de référence, donc l'affichage, l'opacité et d'autres attributs ne fonctionnent pas pour les éléments de masque.

Référence pratique:

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/

Document officiel: http://www.w3.org/tr/svg11/