एसवीजी: पथ समूह <g> टैग

Question

पर मास्क लगाने के लिए मुझे <mask> परत को <g> पथ समूह में लागू करने में समस्या हो रही है।

जब मैं अपने <mask> को <rect> पर लागू करता हूं, तो यह अपेक्षा के अनुसार काम करता है, लेकिन <g> पर इसका उपयोग करते समय, संपूर्ण समूह गायब हो जाता है।

यहाँ मेरी दस्तावेज़

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

है मैं भी कोशिश की है एक ऐसी ही विधि एक ही परिणाम के साथ क्लिप-पथ का उपयोग कर - <rect> नहीं बल्कि <g> साथ काम करना। मैं भी एक ही परिणाम

किसी भी मदद की सराहना की

Answer 1

के साथ व्यक्तिगत <path> तत्वों को mask संपत्ति को लागू करने की कोशिश की किया है मैं गंभीर रूप से संदेह यह सवाल अभी भी सक्रिय है, लेकिन मैंने सोचा कि मैं एक जवाब यहाँ वैसे भी डाल बारे में निर्णय लें, किसी और के लिए।

एक ही समय में सभी तत्वों के समूह को मुखौटा करने के लिए, उन्हें <g></g> ब्लॉक में सभी शामिल करें।

आसान शैली:: तो फिर तुम कुछ विकल्प होते है सभी तत्वों

आप खुश पूरे समूह के उस पार एक अस्पष्टता या अन्य परिवर्तन कर रहे हैं पर सेट अस्पष्टता, <g></g> तत्व एक वर्ग या आईडी, और सेट देना तदनुसार सीएसएस:

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

और सीएसएस (शायद नहीं सब एक साथ है, लेकिन आप अंदाजा हो):

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

कम आसान: एक मुखौटा की स्थापना की और समूह (ओपी प्रश्न)

सबसे पहले आप, किसी आईडी से <defs></defs> ब्लॉक में मुखौटा की स्थापना की तो समूह पर लागू करना होगा करने के लिए लागू होते हैं। एक उदाहरण:

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

मैं मास्किंग तत्व की व्याख्या नहीं करूंगा क्योंकि ओपी पहले से ही जानता है। हालांकि, एक पूरी तरह से गाइड के लिए, here सिर और एक पढ़ा है। वैसे भी, एक बार आप अपने मुखौटा defs में स्थापित है, यह समूह thusly पर लागू होते हैं:

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

इस का सबसे महत्वपूर्ण हिस्सा शैली तत्व style="mask: url(#easyMask);" जो वास्तव में मास्क लागू करता है। यह g समूह के सभी बाल तत्वों पर काम करेगा। अपने मुखौटा की आईडी के साथ बस #easyMask को रिलेस करें और आप जाने के लिए अच्छे हैं! किसी भी अन्य चयनकर्ताओं (जैसे .class1 या कुछ) के साथ इसकी कोशिश नहीं की है, लेकिन # की उपस्थिति सीएसएस-स्टाइल चयनकर्ताओं को इंगित करती है। एक प्रयोग करें :-)