भरना - सीएसएस-ट्रिक्स

fillसीएसएस में संपत्ति एक एसवीजी आकार का रंग भरने के लिए है।

.eyeball ( fill: red; )

याद कीजिए:

• यह एक प्रस्तुति विशेषता को ओवरराइड करेगा
• यह एक इनलाइन शैली को ओवरराइड नहीं करेगा उदा

मूल्यों

fillसंपत्ति किसी भी सीएसएस रंग मान स्वीकार कर सकते हैं।

• नामांकित रंग - orange
• हेक्स रंग - #FF9E2C
• RGB और RGBa रंग - rgb(255, 158, 44)औरrgba(255, 158, 44, .5)
• HSL और HSLa रंग - hsl(32, 100%, 59%)औरhsla(32, 100%, 59%, .5)

एक बोनस के रूप में, fillएसवीजी आकार के पैटर्न को भी स्वीकार करता है जो एक defsतत्व के अंदर परिभाषित होते हैं :

.module ( fill: url(#pattern); )

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन फिल संपत्ति देखें।

एक उपयोग मामला

के लिए एक सामान्य उपयोग मामला fillहोवर पर एक एसवीजी का रंग बदल रहा है, बहुत कुछ जैसा कि हम colorलिंक हॉवर करते समय करते हैं ।

.icon ( fill: black; ) .icon:hover ( fill: orange; )

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन फिल संपत्ति देखें।

एक और उपयोग मामला

fillसंपत्ति एसवीजी ठेठ छवि फ़ाइलों की तुलना में काफी अधिक लचीला विकल्प है कई कारणों में से एक है। आइए एक उदाहरण के रूप में, आइकन्स लें।

हमारे पास आइकन का एक ही सेट हो सकता है लेकिन दो अलग-अलग रंग योजनाओं में। विशिष्ट छवि फ़ाइलों (जैसे JPG.webp, PNG और GIF) को हमें प्रत्येक आइकन के दो संस्करण बनाने की आवश्यकता होगी - प्रत्येक रंग योजना के लिए।

दूसरी ओर, एसवीजी हमें सीएसएस fillसंपत्ति का उपयोग करके आइकन को चित्रित करने की अनुमति देता है :

.icon ( fill: black; ) .icon-secondary ( fill: orange; )

अब हम पथ या आकृति के वर्ग नाम को बदलकर एक ही SVG फ़ाइल को कई परिदृश्यों के लिए पुन: प्रस्तुत कर सकते हैं:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन फिल संपत्ति देखें।

अधिक जानकारी

• एसवीजी 1.1 कल्पना
• भरता और स्ट्रोक पर एमडीएन
• एसवीजी भराव रंग कैस्केडिंग
• याकूब जेनकोव द्वारा एसवीजी फिल पैटर्न

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
हाँ	हाँ	हाँ	हाँ	9+	4.4+ है	हाँ