Ist es möglich, mehrere Masken mit Clip-Pfad zu haben?

Question

Hallo,

Ich frage mich, ob es möglich, mehr als eine Maske auf dem gleichen Element zu verwenden, so wie diese:

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%); 

Damit würde ich in der Lage sein, nur bestimmte Bereiche des Elements zu zeigen, dass sind voneinander getrennt.

Vielen Dank.

Answer 1

Dies ist möglich, wenn Sie Clip-Pfad mit einem SVG definierten <clipPath> verwenden

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

in Chrome Anerkannte Arbeits 60, Firefox 55 auf Windows. Funktioniert leider nicht in IE/Edge.