Clip SVGPercorso per ritagliare il contenuto * outer * fuori

Question

Normalmente, l'elemento <clipPath> nasconde tutto ciò che supera il percorso della clip. Per ottenere l'effetto opposto, ovvero "tagliare" qualcosa dall'immagine, voglio utilizzare due percorsi nel clipPath e l'attributo clip-rule="evenodd". Fondamentalmente, voglio "xor" i percorsi delle clip.

Ma non funziona. Essa mostra la regione "ORed":

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox"> 
     <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" /> 
     <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" /> 
    </clipPath>  

<rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/> 

EDIT:

mio problema è che per quanto ne so <mask> non funziona in iOS WebKit.

Answer 1

È molto più facile fare ciò che si desidera con una maschera, vedere this example. Ecco la definizione della maschera:

<mask id="maskedtext"> 
    <circle cx="50%" cy="50%" r="50" fill="white"/> 
    <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text> 
</mask> 

Le aree bianche all'interno della maschera verranno mantenute, tutto il resto verrà ritagliato.

Ecco che another example che utilizza invece clipPath è un po 'più complicato poiché è necessario utilizzare un elemento di percorso per applicare la regola di ritaglio. Il clipPath che utilizza la regola di clip è simile al seguente:

<clipPath id="clipPath1"> 
    <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/> 
</clipPath>