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

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

रेखीय ग्रेडिएंट

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

<radialGradient> टैग को अनिवार्य रूप से <defs> के अंदर घुसाया जाना चाहिए। <defs> टैग का अर्थ है definitions का अक्षरशब्द, जो ग्रेडिएंट जैसे विशेष एलीमेंटों के लिए परिभाषा करने की अनुमति देता है。

कृपया नीचे दिए गए कोड को नोटपेड के अंदर कॉपी करें, फिर फ़ाइल को "radial1.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>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

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

<radialGradient> टैग का id रूपरेखा को एक अद्वितीय नाम देता है, fill:url(#grey_blue) रूपरेखा ellipse एलीमेंट को इस ग्रेडिएंट से जोड़ती है, cx, cy और r रूपरेखा को बाहरी परिधि को परिभाषित करते हैं, जबकि fx और fy अंतर्ग्रह परिधि को परिभाषित करते हैं ग्रेडिएंट का रंग दायरा दो या अधिक रंगों से बना सकता है। प्रत्येक रंग को एक <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>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

उदाहरण देखें