Máscaras con mask

facebook-svg gplus-svg twitter-svg

Una mascara según wordreference.com es una pieza de cartón, tela, etc..., para taparse la cara y no ser conocido o para protegerse de algo. En SVG una máscara es todo lo contrario. La única región visible es la que se encuentra debajo de la máscara.

Un ejemplo básico

En el siguiente ejemplo un rectángulo verde cubre todo el lienzo SVG. Solo una porción de este rectángulo es visible: la zona que se encuentra debajo de la máscara.
Miremos de cerca el código. Utilizamos el elemento <mask> para definir una máscara. Anidado dentro del elemento <mask> aparece el trazado que queremos utilizar como máscara: en este caso otro rectángulo.

<mask id="mascara">
   <rect x="50" y="50" width="150" height="100" style="stroke:none; fill: #ffffff"></rect> 
</mask>

El relleno del rectángulo es blanco: fill = "#ffffff". Esto es muy importante y veremos más tarde por que. Como siempre cuando se trata de un elemento que no aparece en pantalla, ponemos el elemento <mask> dentro de un elemento <defs> ( definiciones ).
A continuación dibujamos un rectángulo verde al cual le aplicamos la máscara definida anteriormente:

<rect width="250" height="200" fill="#6ab150" style="mask: url(#mascara)"/>



  
    
  


Que pasa con el color de relleno

En el siguiente ejemplo la máscara <mask id="colorDeRelleno"> contiene 9 elementos <circle> cuyo color de relleno toma varios valores de grises. Observamos que el color de relleno determina el valor alpha o la transparencia de la máscara. Si el color de relleno es blanco fill="#ffffff", la máscara es totalmente transparente. Si el color de relleno es negro fill="#000000", la máscara es totalmente opaca. Los diferentes grises determinan diferentes niveles de transparencia de la máscara.



 
  
    
    
    
		
    
    
    
		
    
    
    
  
 

 
	
 #ffffff
 #cccccc
 #aaaaaa
 #999999
 #777777
 #555555
 #333333
 #111111
 #000000
#ffffff #cccccc #aaaaaa #999999 #777777 #555555 #333333 #111111 #000000

Que pasa con la opacidad del color de relleno

El siguiente ejemplo es una replica del ejemplo anterior. Todos los círculos tienen el color de relleno blanco: fill="#ffffff" pero la opacidad del relleno varia de 100%, o sea totalmente opaco ( fill-opacity= "1" ) a 0% o totalmente transparente ( fill-opacity= "0" ).  Observamos que si el relleno del circulo es totalmente opaco ( 100% ) la máscara generada es totalmente transparente, y si el relleno del circulo es totalmente transparente ( 0% ) la máscara generada es totalmente opaca.



 
  
    
    
    
		
    
    
    
		
    
    
    
  
 

 
	
 100%
 90%
 75%
 60%
 50%
 40%
 25%
 10%
 0%
100% 90% 75% 60% 50% 40% 25% 10% 0%

Un caso concreto

En el siguiente ejemplo queremos recortar solo la imagen del madroño y queremos que los bordes estén suavizados, casi desvanecidos.
Para esto la máscara <mask id= "maskCirculo" > contiene un círculo cuyo relleno fill utiliza un degradado radial fill="url(#degradadoRadial)". El degradado va de blanco ( en el centro ) a negro. Sabemos que el blanco genera una máscara totalmente transparente mientras que el negro genera una máscara totalmente opaca, por lo cual la máscara será totalmente transparente en el centro cambiando gradualmente a opaca en el borde.