एसवीजी ड्रॉप शैडो

<defs> और <फ़िल्टर>

सभी SVG फ़िल्टर <defs> तत्व के भीतर परिभाषित होते हैं। परिभाषाओं के लिए <defs> तत्व छोटा है और इसमें विशेष तत्वों (जैसे फ़िल्टर) की परिभाषा शामिल है।

SVG फ़िल्टर को परिभाषित करने के लिए <filter> तत्व का उपयोग किया जाता है। <फ़िल्टर> तत्व में एक आवश्यक आईडी विशेषता होती है जो फ़िल्टर की पहचान करती है। ग्राफिक तब उपयोग करने के लिए फ़िल्टर को इंगित करता है।

एसवीजी <feOffset>

उदाहरण 1

ड्रॉप छाया प्रभाव बनाने के लिए <feOffset> तत्व का उपयोग किया जाता है। विचार एक एसवीजी ग्राफिक (छवि या तत्व) लेने और इसे xy विमान में थोड़ा सा स्थानांतरित करने का है।

पहला उदाहरण एक आयत को ऑफ़सेट करता है (<feOffset> के साथ), फिर ऑफ़सेट छवि के शीर्ष पर मूल को मिश्रित करें (<feBlend> के साथ):

यहाँ एसवीजी कोड है:

कोड स्पष्टीकरण:

• <फ़िल्टर> तत्व की आईडी विशेषता फ़िल्टर के लिए एक अद्वितीय नाम को परिभाषित करती है
• <rect> तत्व की फ़िल्टर विशेषता तत्व को "f1" फ़िल्टर से जोड़ती है

उदाहरण 2

अब, ऑफ़सेट छवि को धुंधला किया जा सकता है (<feGaussianBlur> के साथ):

यहाँ एसवीजी कोड है:

कोड स्पष्टीकरण:

• <feGaussianBlur> तत्व की stdDeviation विशेषता धुंध की मात्रा को परिभाषित करती है

उदाहरण 3

अब, छाया को काला करें:

यहाँ एसवीजी कोड है:

कोड स्पष्टीकरण:

• <feOffset> तत्व की विशेषता को "सोर्सअल्फा" में बदल दिया गया है जो पूरे आरजीबीए पिक्सेल के बजाय ब्लर के लिए अल्फा चैनल का उपयोग करता है

उदाहरण 4

अब, छाया को एक रंग के रूप में देखें:

यहाँ एसवीजी कोड है:

कोड स्पष्टीकरण:

• ऑफसेट छवि में रंगों को काले रंग के करीब बदलने के लिए <feColorMatrix> फ़िल्टर का उपयोग किया जाता है। मैट्रिक्स में '0.2' के तीन मान लाल, हरे और नीले चैनलों से गुणा हो जाते हैं। उनके मूल्यों को कम करने से रंग काले रंग के करीब आ जाते हैं (काला 0 है)