हमने सीखा है कि एसवीजी के एक बिट डालने के लिए उपयोग करने की एक सीमा यह है कि आप यौगिक सीएसएस चयनकर्ताओं को नहीं लिख सकते हैं जो वहां से प्रभावित होते हैं। उदाहरण के लिए:
वह छाया DOM बाउंड्री जैसे चयनकर्ताओं को रोकता है
/* nope */ .parent .child ( )काम करने से। शायद किसी दिन हमें उस छाया डोम सीमा को भेदने के लिए एक काम करने वाला सीएसएस चयनकर्ता मिल जाएगा, लेकिन इस लेखन के रूप में यह अभी तक यहां नहीं है।
आप अभी भी पेरेंट पर फिल सेट कर सकते हैं और वह नीचे से कैसकेड करेगा, लेकिन यह केवल आपको एक रंग देता है ( fillउन आकृतियों पर प्रस्तुतिकरण विशेषता को सेट नहीं करने के लिए याद रखें !)।
फैब्रिस वेनबर्ग ने currentColorसीएसएस में कीवर्ड का दोहन करते हुए दो रंगों को प्राप्त करने के लिए एक साफ सुथरी तकनीक के बारे में सोचा ।
सीएसएस प्रॉपर्टी को किसी भी आकार पर सेट करें जिसे आप पसंद करते हैं।
.shape-1, .shape-2 ( fill: currentColor; )इस तरह जब आप पैरेंट पर कलर प्रॉपर्टी सेट करते हैं , तो वह भी कैस्केड हो जाएगा। यह अपने आप से कुछ भी नहीं करेगा (जब तक कि आपके पास वहां नहीं है), लेकिन currentColorयह बंद है colorइसलिए आप इसे अन्य चीजों के लिए उपयोग कर सकते हैं।
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )डेमो:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा इनलाइन SVG के रूप में पेन कोडपेन लोगो देखें।