एसवीजी ग्रेडियेंट - रैखिक

एसवीजी ग्रेडिएंट

एक ढाल एक रंग से दूसरे रंग में एक सहज संक्रमण है। इसके अलावा, एक ही तत्व पर कई रंग संक्रमण लागू किए जा सकते हैं।

SVG में दो मुख्य प्रकार के ग्रेडिएंट हैं:

• रैखिक
• रेडियल

एसवीजी रैखिक ढाल - <रैखिक ढाल>

एक रैखिक ढाल को परिभाषित करने के लिए <linearGradient> तत्व का उपयोग किया जाता है।

<linearGradient> तत्व को <defs> टैग के भीतर नेस्ट किया जाना चाहिए। परिभाषाओं के लिए <defs> टैग छोटा है और इसमें विशेष तत्वों (जैसे ग्रेडिएंट) की परिभाषा शामिल है।

रैखिक ग्रेडिएंट को क्षैतिज, ऊर्ध्वाधर या कोणीय ग्रेडिएंट के रूप में परिभाषित किया जा सकता है:

• क्षैतिज ग्रेडिएंट तब बनते हैं जब y1 और y2 बराबर होते हैं और x1 और x2 भिन्न होते हैं
• लंबवत ग्रेडियेंट तब बनते हैं जब x1 और x2 बराबर होते हैं और y1 और y2 भिन्न होते हैं
• कोणीय ग्रेडिएंट तब बनते हैं जब x1 और x2 भिन्न होते हैं और y1 और y2 भिन्न होते हैं

उदाहरण 1

पीले से लाल रंग के क्षैतिज रैखिक ढाल के साथ एक अंडाकार को परिभाषित करें:

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

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

• <linearGradient> टैग की आईडी विशेषता ग्रेडिएंट के लिए एक अद्वितीय नाम को परिभाषित करती है
• <linearGradient> टैग की X1, x2, y1,y2 विशेषताएँ ग्रेडिएंट की शुरुआत और अंत स्थिति को परिभाषित करती हैं
• एक ढाल के लिए रंग सीमा दो या दो से अधिक रंगों से बनी हो सकती है। प्रत्येक रंग को <stop> टैग के साथ निर्दिष्ट किया जाता है। ऑफ़सेट विशेषता का उपयोग यह परिभाषित करने के लिए किया जाता है कि ग्रेडिएंट रंग कहाँ से शुरू और समाप्त होता है
• भरण विशेषता दीर्घवृत्त तत्व को ढाल से जोड़ती है

उदाहरण 2

पीले से लाल रंग के लंबवत रैखिक ढाल के साथ एक अंडाकार परिभाषित करें:

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

उदाहरण 3

पीले से लाल रंग के क्षैतिज रैखिक ढाल के साथ एक अंडाकार को परिभाषित करें, और अंडाकार के अंदर एक टेक्स्ट जोड़ें:

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

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

• टेक्स्ट जोड़ने के लिए <text> तत्व का उपयोग किया जाता है