Tutoriel SVG

Élément SVG

Élément de animation SVG <Animation>Élément <clipPath> SVG

Élément <mask> SVG

En utilisant la fonction de masque SVG, vous pouvez appliquer un masque à une forme SVG. Le masque SVG est une version plus avancée des chemins de coupe, utilisé pour déterminer quels parties de la forme SVG sont visibles et quelle transparence elles ont.

Dans SVG, vous pouvez indiquer un calque transparent et combiner avec l'objet courant pour former le fond. Le calque transparent peut être tout autre objet graphique ou élément <g>. L'élément mask est utilisé pour définir un tel élément de masque. L'attribut mask est utilisé pour faire référence à un élément de masque.

Exemple en ligne

Créez un masque rectangulaire bleu

Exemple

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

Testez et voyez‹/›

L'effet après l'exécution est le suivant:

Explication de l'utilisation

L'attribut id de l'élément <mask> définit le nom unique du masque.
L'élément <rect> du <mask> définit la forme du masque.
L'attribut style du <rect>元素的mask ID donne l'attribut CSS mask.

Plus d'exemples en ligne

Texte de masque

Exemple

<svg　width="200"　height="80"　
　　　　　viewBox="0　0　200　80"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask　id="myMask"　maskUnits="userSpaceOnUse"
　　　　　　　　　　　　　　x="0"　y="0"　width="200"　height="80">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="100"　height="80"　fill="white"/>
　　　　　　　　</mask>
　　　　　　　　<text　id="Text"　x="100" y="48"　
　　　　　　　　　　　　　　font-size="26"　font-weight="bold"　text-anchor="middle">
　　　　　　　　　　　　Black & White
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　Tracez un rectangle noir en arrière-plan　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　Tracez la chaîne de texte deux fois. D'abord, le texte blanc sans masque. Ensuite, le texte noir avec masque-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

Vérifiez le test ‹/›

L'effet après l'exécution est le suivant:

Élément de animation SVG <Animation>Élément <clipPath> SVG