Manuale di SVG

Elementi SVG

Elemento di animazione SVG <Animation>Elemento <clipPath> di SVG

Elemento <mask> di SVG

Utilizzando la funzione di maschera SVG, è possibile applicare la maschera a forme SVG. La maschera SVG è una versione più avanzata di percorso di tagliatura, utilizzata per determinare quali parti di una forma SVG sono visibili e quale trasparenza hanno.

In SVG, puoi indicare una sovrapposizione trasparente e l'oggetto corrente per formare lo sfondo. La sovrapposizione trasparente può essere qualsiasi altro oggetto grafico o elemento <g>. L'elemento mask viene utilizzato per definire tali elementi di maschera. L'attributo mask viene utilizzato per riferirsi a un elemento di maschera.

Esempio online

Genera una maschera rettangolare blu

Esempio

<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>

Prova a vedere‹/›

Ecco l'effetto dopo l'esecuzione:

Spiegazione dell'uso

L'attributo id dell'elemento <mask> definisce il nome unico della maschera.
L'elemento <rect> dell'elemento <mask> definisce la forma della maschera.
L'attributo style dell'elemento <rect> fa avere al elemento ID maschera le proprietà CSS di maschera.

Più esempi online

Effetto di maschera di testo

Esempio

<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">
　　　　　　　　　　　　Nero & Bianco
　　　　　　　　</text>
　　　　</defs>
　　　　<!-- Disegna un rettangolo nero sullo sfondo -->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!-- Disegna la stringa di testo due volte. Prima, testo bianco senza maschera. Poi, testo nero con maschera -->
　　　　<use xlink:href="#Text" fill="bianco"/></use>
　　　　<use xlink:href="#Text" fill="nero" mask="url(#myMask)"/></use>
</svg>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Elemento di animazione SVG <Animation>Elemento <clipPath> di SVG