एसवीजी लाइनर ग्रेडिएंट

SVG ग्रेडिएंट को <defs> टैग में परिभाषित करना चाहिए

SVG ग्रेडिएंट

ग्रेडिएंट एक रंग से दूसरे रंग तक की सही तरह से पारित होने वाली गतिविधि है। इसके अलावा, एक ही एलीमेंट पर कई रंगों की पारित होने वाली गतिविधियों को भी लगाया जा सकता है

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

  • स्तरीय ग्रेडिएंट
  • रेडियाक ग्रेडिएंट

स्तरीय ग्रेडिएंट

<linearGradient> टैग का उपयोग SVG के स्तरीय ग्रेडिएंट को परिभाषित करने के लिए किया जाता है

<linearGradient> टैग को <defs> के अंदर निहित करना चाहिए। <defs> टैग का अर्थ है definitions (परिभाषा), जो ग्रेडिएंट जैसे विशिष्ट एलीमेंटों का परिभाषण कर सकता है

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

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

कृपया नीचे दिए गए कोड को नोटबुक में कॉपी करें, फिर फ़ाइल को "linear1.svg" नाम से सहेजें। इस फ़ाइल को आपके वेब डिरेक्ट्री में रखें:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

कोड व्याख्या:

  • <linearGradient> टैग का id अटिबूट ग्रेडिएंट को एक अद्वितीय नाम देता है
  • fill:url(#orange_red) अटिबूट ellipse एलीमेंट को इस ग्रेडिएंट से जोड़ता है
  • <linearGradient> टैग के x1, x2, y1, y2 अटिबूट ग्रेडिएंट के शुरूआत और समाप्ति स्थान को परिभाषित कर सकते हैं
  • ग्रेडिएंट का रंग की सीमा दो या अधिक रंगों से बनी हो सकती है। प्रत्येक रंग को एक <stop> टैग के द्वारा निर्धारित किया जाता है। offset अटिबूट का उपयोग ग्रेडिएंट की शुरूआत और समाप्ति स्थान को परिभाषित करने के लिए किया जाता है。

उदाहरण देखें (स्तरीय ग्रेडिएंट)

एक अन्य उदाहरणः

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55">
style="fill:url(#orange_red)"/>
</svg>

उदाहरण देखें (ऊर्ध्व ग्रेडिएंट)