SVG: Anwenden der Maske auf Pfadgruppe <g> Tag

Question

Ich habe Probleme beim Anwenden einer <mask> Schicht auf eine <g> Pfadgruppe.

Wenn ich meine <mask> einen <rect> anwenden, funktioniert es wie erwartet, aber wenn es auf einem <g> verwendet wird, verschwindet die gesamte Gruppe.

Hier ist mein 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> 

Ich habe auch ein ähnliches Verfahren unter Verwendung von Clip-Pfad mit dem gleichen Ergebnis versucht - der Arbeit mit <rect> aber nicht <g>. Ich habe auch versucht die mask Eigenschaft auf einzelne <path> Elemente mit dem gleichen Ergebnis Anwendung

Jede Hilfe

Answer 1

schätzte ich ernsthaft Zweifel, ob diese Frage immer noch aktiv ist, aber ich dachte, dass ich hier auf jeden Fall eine Antwort setzen würde, für jeden anderen.

Um eine Gruppe von Elementen gleichzeitig zu maskieren, enthalten Sie sie alle in einem <g></g> Block. Dann sind Sie ein paar Möglichkeiten:

Easy Style: set Opazität auf allen Elementen

Wenn Sie gerne eine Opazität oder andere Transformation in der gesamten Gruppe, geben dem <g></g> Element eine Klasse oder ID und Set entsprechend CSS:

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

und die CSS (wahrscheinlich nicht alle zusammen, aber Sie erhalten die Idee):

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

weniger leicht: Stellen Sie eine Maske auf und gelten für die Gruppe (OP Frage)

Zuerst müssen Sie die Maske im <defs></defs> Block mit einer ID einrichten, dann gilt es für die Gruppe. Ein Beispiel:

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

Ich werde das Maskierungselement nicht erklären, weil das OP das bereits zu kennen scheint. Für eine gründliche Anleitung, Kopf here und lesen. Wie auch immer, sobald Sie Ihre Maske in defs eingerichtet haben, wenden Sie es auf diese Weise für die Gruppe:

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

Wichtigster Bestandteil ist das Stilelement style="mask: url(#easyMask);", die die Maske tatsächlich zutrifft. Es wird auf allen untergeordneten Elementen der Gruppe g funktionieren. Just relace #easyMask mit der ID Ihrer Maske und du bist gut zu gehen! Habe es nicht mit anderen Selektoren probiert (wie .class1 oder etwas), aber das Vorhandensein von # scheint CSS-Selektoren anzuzeigen. Habe ein Experiment :-)