SVG लाइनर ग्रेडिएंट

SVG ग्रेडिएंट

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

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

  • लीनियर ग्रेडिएंट
  • रेखांकित ग्रेडिएंट

SVG लीनियर ग्रेडिएंट - <linearGradient>

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

<linearGradient> एलीमेंट निश्चित रूप से <defs> टैग के अंदर.<defs> एलीमेंट डिफाइनिशन्स का अभियोग है, जिसमें विशेष एलीमेंट (जैसे फिल्टर) के डिफाइनिशन शामिल हैं。

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

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

उदाहरण 1

एक पीला से लाल तक की अनुक्रमित रेखांकित गोलाकार डायागोनल ग्रेडिएंट को परिभाषित करता है:

यह SVG कोड हैः

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

स्वयं को प्रयास कीजिए

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

  • <linearGradient> टैग के id विशेषता ग्रेडिएंट के अनूच्छवित नाम को परिभाषित करती है
  • <linearGradient> टैग के x1, x2, y1, y2 विशेषताएँ ग्रेडिएंट के शुरूआत और अंत को परिभाषित करती है
  • ग्रेडिएंट रंग दो या अधिक रंगों से बना सकता है। प्रत्येक रंग को <stop> टैग से निर्दिष्ट किया जाता है
  • offset विशेषता ग्रेडिएंट रंग के शुरूआत और अंत को परिभाषित करती है
  • fill विशेषता दीर्घवृत्त एलिमेंट को ग्रेडिएंट से जोड़ती है

उदाहरण 2

एक दीर्घवृत्त को परिभाषित करें जो पीले से लाल तक के वर्तिक लाइनर ग्रेडिएंट है:

यह SVG कोड हैः

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

स्वयं को प्रयास कीजिए

उदाहरण 3

एक दीर्घवृत्त को परिभाषित करें और उसके अंदर पाठ जोड़ें, जो पीले से लाल तक के होरिज़ोन्टल लाइनर ग्रेडिएंट है:

SVG

यह SVG कोड हैः

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

स्वयं को प्रयास कीजिए

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

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