Maschera SVG (Mask)

La funzione di maschera SVG può applicare una maschera a forme SVG. La maschera determina quali parti della forma SVG sono visibili e con quale opacità. Puoi considerare la maschera SVG come una versione più avanzata di un percorso di tagliatura.

Esempi di maschere

Ecco un esempio semplice di maschera:

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

Questo esempio definisce una maschera con ID=mask1. All'interno dell'elemento <mask> c'è un elemento <rect>. È proprio questo elemento <rect> che definisce la forma della maschera.

Questo esempio definisce anche un elemento <rect> utilizzando la maschera. L'elemento <rect> utilizza l'attributo style per riferirsi all'ID della maschera.

Effetto dell'immagine dopo l'esecuzione:

Nota che l'altezza del rettangolo da visualizzare è di 100 pixel, ma i primi 50 pixel verticali sono visibili. Questo è perché la maschera rettangolare è alta solo 50 pixel. Il rettangolo è visibile solo nella parte coperta dalla maschera rettangolare.

Il rettangolo contornato nero non ha maschera e ha la stessa dimensione del rettangolo.

Maschere di forme diverse

Puoi utilizzare qualsiasi forma SVG come maschera. Ecco un esempio di utilizzo di un cerchio come maschera:

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

Effetto dell'immagine dopo l'esecuzione:

Ricorda ancora, il rettangolo di riferimento della maschera è visibile solo dove la maschera è visibile.

Definizione del colore della forma della maschera per l'opacità della maschera

Fino ad ora, il colore di riempimento della forma della maschera (circolare o rettangolare) è impostato su #ffffff. Il colore della forma della maschera definisce l'opacità della forma utilizzata con la maschera. Più il colore della forma della maschera è vicino a #ffffff (bianco), più la forma utilizzata con la maschera sarà opaca. Più il colore della forma della maschera è vicino a #000000 (nero), più la forma utilizzata con la maschera sarà trasparente.

Questo è un esempio in cui la maschera è composta da due rettangoli di colori diversi (#ffffff e #66666). La maschera è utilizzata per un singolo rettangolo, quindi puoi vedere come due forme diverse nella maschera influenzano lo stesso forma.

<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;">
　　　　Questo testo è sotto il rettangolo
</text>
<rect　x="1"　y="1"　width="100"　height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask3)"/>
　　</svg>

Questo esempio include anche un testo situato sotto il rettangolo, che è visibile solo attraverso la parte semi-trasparente della maschera del rettangolo.

Effetto dell'immagine dopo l'esecuzione:

Uso del gradiente nella maschera

Se applichi un gradiente alla forma utilizzata come maschera, puoi ottenere una trasparenza di gradiente sulla forma applicata dalla maschera.

Questo è un esempio di definizione di un gradiente, utilizzando una maschera di gradiente, una rettangolo con maschera e il testo sotto il rettangolo, quindi puoi vedere come la trasparenza cambia con il gradiente della maschera:

<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;">
　　　　Questo testo è sotto il rettangolo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask4)"/>
　　</svg>

Effetto dell'immagine dopo l'esecuzione:

La maschera di gradiente può essere combinata con altri effetti (ad esempio, modelli di riempimento). Ecco un esempio in cui il rettangolo utilizza un modello di riempimento come riempimento e una gradazione come maschera:}

<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;">
　　　　Questo testo è sotto il rettangolo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　　　style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
　　</svg>

Nota come il rettangolo richiama il modello di riempimento nel suo attributo CSS fill e come richiama la maschera nel suo attributo CSS mask.

Effetto dell'immagine dopo l'esecuzione.

L'uso di modelli di riempimento nelle maschere

Puoi anche utilizzare modelli di riempimento nelle maschere per fare in modo che la maschera prenda la forma del modello di riempimento. Ecco un esempio:

<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(#pattern1)"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　Questo testo è sotto il rettangolo
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
　　</svg>

Effetto dell'immagine dopo l'esecuzione. Nota che il rettangolo è semi-trasparente, dove il motivo di riempimento disegna cerchi e in altri luoghi completamente trasparenti.