SVG रेडियल ग्रेडिएंट

SVG वृत्तीय गतिशीलता - <radialGradient>

<radialGradient> टैग को परिभाषित करता है जो वृत्तीय गतिशीलता (radial gradient) को परिभाषित करता है

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

उदाहरण 1

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

यह SVG कोड है:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

स्वयं प्रयास करें

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

• <radialGradient> टैग के id गुणवत्ता गतिशीलता का अद्वितीय नाम परिभाषित करता है
• cx, cy और r गुणवत्ता सबसे बाहरी गोला को परिभाषित करते हैं, fx और fy निचले गोला को परिभाषित करते हैं
• गतिशीलता का रंग की श्रेणी दो या अधिक रंगों से बन सकती है। प्रत्येक रंग को <stop> टैग से निर्दिष्ट किया जाता है
• offset गुणवत्ता गतिशीलता के रंग के शुरूआत और समापन स्थान को परिभाषित करता है
• fill गुणवत्ता दीर्घवृत्त एलिप्स को गतिशीलता से जोड़ता है

उदाहरण 2

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

यह SVG कोड है:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

स्वयं प्रयास करें