Masque SVG (Mask)

La fonction de masque SVG permet d'appliquer un masque à une forme SVG. Le masque détermine quelles parties de la forme SVG sont visibles et quelle transparence elles ont. Vous pouvez considérer le masque SVG comme une version plus avancée d'un chemin de coupe.

Exemple de masque

C'est un exemple simple de masque :

<svg width="500"　height="120">
<defs
　　<mask id="mask1" x="0" y="0" width="100" height="100">
　　　　<rect　x="0"　y="0"　width="100" height="50"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect　x="1"　y="1"　width="100" height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
　　</svg>

Dans cet exemple, l'ID est = mask1Définir un masque. À l'intérieur de l'élément <mask> se trouve un élément <rect>. C'est cet élément <rect> qui définit la forme du masque.

Dans cet exemple, un élément <rect> utilisant le masque est défini. 　L'élément <rect> utilise la propriété style mask interne pour se référer à l'ID de masque.

Effet d'image après exécution :

Notez que la hauteur du rectangle à afficher est100 pixels, mais la partie avant50 pixels sont visibles. C'est parce que le rectangle de masque n'a que50 pixels de hauteur. Le rectangle n'est visible que dans la partie couverte par le rectangle de masque.

La taille du rectangle avec contour noir est la taille du rectangle sans masque.

Autres formes de masque

Vous pouvez utiliser n'importe quelle forme SVG comme masque. Voici un exemple où le cercle est utilisé comme masque:

<svg>
　　<defs
　　　　<mask id="mask2" x="0" y="0" width="100" height="100">
　　　　　　<circle cx="25" cy="25" r="25"　style="stroke:none;　fill:　#ffffff"/>
　　　　</mask>
　　</defs>
　　<rect　x="1"　y="1"　width="100" height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask2)"/>
</svg>

Effet d'image après exécution :

Une nouvelle fois, notez que le rectangle de référence visible n'est visible que dans les endroits où le cercle de masque est visible.

La définition de la couleur de la forme de masque définit l'opacité du masque

Jusqu'à présent, la couleur de remplissage de la forme de masque (cercle ou rectangle) est définie sur #ffffff. La couleur de la forme de masque est définie par l'opacité de la forme de masque. Plus la couleur de la forme de masque est proche de #ffffff (blanc), plus la forme utilisant le masque est opaque. Plus la couleur de la forme de masque est proche de #000000 (noir), plus la forme utilisant le masque est transparente.

C'est un exemple où le masque est composé de deux rectangles de couleurs différentes (#ffffff et66666constitué de rectangles. Le masque est utilisé pour un rectangle unique, donc vous pouvez utiliser le masque pour voir comment deux formes différentes dans le masque affectent la même forme.

<svg width="500"　height="120">
<defs
　　<mask id="mask3" x="0" y="0" width="100" height="100">
　　　　<rect x="0" y="0" width="100" height="50"
　　　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　　　<rect x="0" y="50" width="100" height="50"
　　　　　　　　　　style="stroke:none; fill: #666666"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:　none;　fill:　#000000;">
　　　　Ce texte se trouve sous le rectangle
</text>
<rect　x="1"　y="1"　width="100" height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask3)"/>
　　</svg>

L'exemple contient également un texte situé sous le rectangle, que vous ne pouvez voir que par la partie semi-transparente du masque du rectangle.

Effet d'image après exécution :

Utilisation de dégradé dans le masque

Si vous appliquez un dégradé à la forme utilisée comme masque, vous pouvez obtenir une transparence de dégradé pour la forme appliquée par le masque.

Voici un exemple de définition d'un dégradé, utilisant un masque de dégradé, un rectangle de masque et le texte sous ce rectangle, donc vous pouvez voir comment la transparence change avec le dégradé du masque :

<svg width="500"　height="120">
<defs
　　　　<linearGradient id="gradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="100%" y2="0%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
　　　　　　　　<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
　　　　</linearGradient>
　　　　<mask id="mask4" x="0" y="0" width="200"　height="100">
　　　　　　　　<rect x="0" y="0" width="200"　height="100"
　　　　　　　　　　　　style="stroke:none; fill: url(#gradient1)"/>
　　　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:　none;　fill:　#000000;">
　　　　Ce texte se trouve sous le rectangle
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask4)"/>
　　</svg>

Effet d'image après exécution :

Le masque de dégradé peut être combiné avec d'autres effets (par exemple, le motif de remplissage). Voici un exemple où le rectangle utilise le motif de remplissage comme remplissage et applique un dégradé sur son masque :

<svg width="500"　height="120">
<defs
　　<linearGradient id="gradient2"
　　　　　　　　　　　　　　　　x1="0%" y1="0%"
　　　　　　　　　　　　　　　　x2="100%" y2="0%"
　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
　　　　<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
　　</linearGradient>
　　<pattern id="pattern2"
　　　　　　　　　x="10"　y="10"　width="20" height="20"
　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff; "　/>
　　</pattern>
　　<mask id="mask6" x="0" y="0" width="200"　height="100">
　　　　　　<rect x="0" y="0" width="200"　height="100"
　　　　　　　　　　style="stroke:none; fill: url(#gradient2)"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:　none;　fill:　#000000;">
　　　　Ce texte se trouve sous le rectangle
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　　　style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
　　</svg>

Veuillez noter comment le rectangle fait référence à son motif de remplissage dans les attributs CSS de remplissage, ainsi qu'à son masque.

Effet d'image après exécution.

Utilisation d'un motif de remplissage dans le masque

Vous pouvez également utiliser un motif de remplissage dans le masque pour que le masque devienne la forme du motif de remplissage. Voici un exemple :

<svg width="500"　height="120">
<defs
　　<pattern id="pattern1"
　　　　　　　　　x="10"　y="10"　width="20" height="20"
　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　　　<circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999"　/>
　　</pattern>
　　<mask id="mask5" x="0" y="0" width="200"　height="100">
　　　　<rect x="0" y="0" width="200"　height="100"
　　　　　　　　style="stroke:none;　fill:　url(#pattern}}1)"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:　none;　fill:　#000000;">
　　　　Ce texte se trouve sous le rectangle
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask5)"/>
　　</svg>

Effet d'image après exécution. Notez que le rectangle est semi-transparent, avec un motif de remplissage dessinant un cercle et complètement transparent à d'autres endroits.