SVG: Stosowanie maski do grupy ścieżek <g> tag

Question

Mam problem z zastosowaniem warstwy <mask> do grupy ścieżek <g>.

Kiedy stosuje mój <mask> Do <rect>, że działa zgodnie z oczekiwaniami, ale podczas używania go na <g>, cała grupa znika.

Oto mój dokument

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

Próbowałem zostały również podobny sposób przy użyciu clip-ścieżkę z tych samych wyników - praca z <rect> ale nie <g>. Próbowałem zostały również stosując właściwość poszczególnych elementów mask<path> z takim samym skutkiem

Każda pomoc mile widziane

Answer 1

ja poważnie wątpić, czy to pytanie jest nadal aktywny, ale pomyślałem, że umieścić odpowiedź tutaj tak, dla kogokolwiek innego.

Aby jednocześnie zamaskować grupę elementów, należy je wszystkie umieścić w bloku <g></g>. Wtedy masz kilka opcji:

Łatwa Styl: ustaw krycie na wszystkich elementach

Jeśli jesteś zadowolony mającą krycie lub każdej innej transformacji w całej grupie, nadać elementowi <g></g> klasę lub identyfikator i ustaw CSS odpowiednio:

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

i CSS (prawdopodobnie nie wszystkie razem, ale masz pomysł):

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

trudniej: założyć maskę i stosować się do grupy (PO zapytania)

Najpierw trzeba założyć maskę w bloku <defs></defs> z ID, a następnie zastosować je do grupy. Przykład:

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

Nie wyjaśniam elementu maskującego, ponieważ OP zdaje się już to wiedzieć. Jednakże, aby uzyskać dokładny przewodnik, należy uzyskać here i przeczytać. W każdym razie, skoro masz maska ​​założona w DEFS, stosuje się go do grupy wygląda następująco:

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

najważniejszą częścią jest element stylu style="mask: url(#easyMask);" które faktycznie stosuje maskę. Będzie działać na wszystkich elementach potomnych grupy g. Po prostu przytnij #easyMask z identyfikatorem swojej maski i możesz już iść! Nie próbowałem go z innymi selektorami (np. .class1 lub coś podobnego), ale obecność # wydaje się wskazywać selektory stylu CSS. Zrób eksperyment :-)