SVG: applicazione della maschera al gruppo di percorsi <g> tag

Question

Ho problemi ad applicare un livello <mask> a un gruppo di percorsi <g>.

Quando si applica il mioa un <rect>, funziona come previsto, ma quando lo si utilizza su un <g>, l'intero gruppo scompare.

Ecco il mio documento

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600.000000 600.000000" preserveAspectRatio="xMidYMid meet"> 

    <defs> 
     <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600"> 
      <rect fill="white" x="0" y="0" width="600" height="600"></rect> 
      <circle cx="30" cy="30" r="20" fill="black"></circle> 
      <circle cx="300" cy="300" r="200" fill="black"></circle> 
     </mask> 
    </defs> 

    <rect fill="#FFFFFF" width="21456" height="21456" mask="url(#myMask)"></rect> 

    <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#100059" stroke="none" mask="url(#myMask)"> <!-- a bunch of <path>s --> </g> 

    <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#f542b3" stroke="none"> <!-- a bunch of <path>s --> </g> 

</svg> 

Ho anche provato un metodo simile utilizzando clip-percorso con gli stessi risultati - lavorare con <rect> ma non <g>. Ho anche provato applicando la proprietà mask ai singoli <path> elementi con lo stesso risultato

Qualsiasi aiuto apprezzato

Answer 1

ho gravemente dubbio se questa domanda è ancora attivo, ma ho pensato che avevo messo una risposta qui in ogni caso, per chiunque altro.

Per mascherare un gruppo di elementi tutti allo stesso tempo, contenerli tutti all'interno di un blocco <g></g>. Poi ci sono un paio di opzioni:

Facile Stile: impostare l'opacità su tutti gli elementi

Se sei felice un'opacità o qualsiasi altra trasformazione attraverso l'intero gruppo, dare l'elemento <g></g> una classe o un ID, e insieme CSS di conseguenza:

<g id="someGroup" class="class1 class2"> 
    <path ...></path> 
    <circle ...></circle> 
    <whatever ...></whatever> 
</g> 

e il CSS (probabilmente non tutti insieme, ma si ottiene l'idea):

g, 
#someGroup, 
.class1, 
.class2 { 
    opacity: 0.5; 
} 

meno facile: impostare una maschera e applicare al gruppo (domanda OP)

primo luogo si dovrà impostare la maschera nel blocco <defs></defs> con un ID, quindi applicare al gruppo. Un esempio:

<mask id="easyMask" x="0" y="0" width="1" height="1" 
    maskContentUnits="objectBoundingBox"> 
    <rect x="0" y="0" width="1" height="1" 
     style="fill-opacity: 0.25; fill: white;"/> 
</mask> 

Non spiegherò l'elemento di mascheramento perché l'OP sembra saperlo già. Tuttavia, per una guida approfondita, vai su here e leggi. In ogni caso, una volta che hai la maschera istituito nel defs, applicarlo al gruppo così:

<g style="mask: url(#easyMask);"> 
    <path ...></path> 
    <circle ...></circle> 
    <whatever ...></whatever> 
</g> 

parte più importante di questo è l'elemento di stile style="mask: url(#easyMask);" che si applica in realtà la maschera. Funzionerà su tutti gli elementi figlio del gruppo g. Basta ricollegare lo #easyMask con l'ID della tua maschera e sei a posto! Non l'ho provato con altri selettori (come .class1 o qualcosa del genere) ma la presenza di # sembra indicare selettori in stile CSS. Fai un esperimento :-)