SVG: aplicar la máscara al grupo de rutas <g> etiqueta

Question

Tengo problemas para aplicar una capa <mask> a un grupo de rutas <g>.

Cuando aplico mi <mask> a un <rect>, funciona como se esperaba, pero al usarlo en un <g>, el grupo completo desaparece.

Aquí está mi 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> 

También he intentado un método similar usando el clip-camino con los mismos resultados - trabajar con <rect> pero no <g>. También he intentado aplicar la propiedad mask a <path> elementos individuales con el mismo resultado

Cualquier ayuda apreció

Answer 1

I seriamente la duda de si esta pregunta todavía está activo, pero pensé que había puesto una respuesta aquí de todos modos, para cualquier otra persona

Para enmascarar un grupo de elementos, todo al mismo tiempo, los contiene a todos dentro de un bloque <g></g>. Entonces usted tiene un par de opciones:

fácil Estilo: ajustar la opacidad en todos los elementos

Si está satisfecho con una opacidad u otra transformación de todo el grupo, dar al elemento <g></g> una clase o ID, y un conjunto CSS en consecuencia:

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

y el CSS (probablemente no todos juntos, pero se entiende la idea):

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

menos fácil: configurar una máscara y se aplica al grupo (pregunta OP)

En primer lugar, tendrá que ajustar la máscara en el bloque <defs></defs> con un ID, luego aplicarlo al grupo. Un ejemplo:

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

No explicaré el elemento de enmascaramiento porque el OP parece saberlo ya. Sin embargo, para una guía completa, diríjase a here y tenga una lectura. De todos modos, una vez que tenga su máscara creada en defs, que se aplican al grupo de esta manera:

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

parte más importante de esto es el elemento de estilo style="mask: url(#easyMask);" que en realidad se aplica la máscara. Funcionará en todos los elementos secundarios del grupo g. Simplemente relacione #easyMask con la ID de su máscara y listo. No lo he probado con otros selectores (como .class1 o algo así), pero la presencia del # parece indicar selectores de estilo CSS. Tener un experimento :-)