È possibile avere più maschere con percorso clip?

Question

Ciao,

mi chiedo se è possibile utilizzare più di una maschera sullo stesso elemento, proprio come questo:

clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%); 

Con questo vorrei essere in grado di mostrare solo alcune zone del elemento che sono separati gli uni dagli altri.

Grazie.

Answer 1

Questo è possibile se si utilizza clip-percorso con uno SVG definito <clipPath>

.clip-svg { 
 
    clip-path: url(#myClip); 
 
}

<img class="clip-svg" src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg"> 
 

 
<svg width="0" height="0"> 
 
    <defs> 
 
    <clipPath id="myClip"> 
 
     <polygon points="400,50 400,320, 140,300"/> 
 
     <polygon points="450,10 500,200 600,100" /> 
 
     <polygon points="150,10 100,200 300,100" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg>

confermato lavora in Chrome 60, Firefox 55 su Windows. Sfortunatamente non funziona in IE/Edge.