SVG రేడియల్ గ్రేడియంట్

SVG రంగాలను <defs> టాగ్ లో నిర్వచించాలి.

కిరణాకార రంగం

<radialGradient> టాగ్ గురించి కిరణాకార రంగాన్ని నిర్వచిస్తుంది.

<radialGradient> టాగ్ గురించి దానిని <defs> లోకి చొప్పించాలి. <defs> టాగ్ యొక్క సంక్షిప్త రూపం గా ఉంటుంది, దానిద్వారా గుర్తించిన ప్రత్యేక అంశాలు వంటి రంగాలను నిర్వచించవచ్చు.

క్రింది కోడ్ ను నిజానికి కాపీ చేసి, దానిని "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>

ఉదాహరణను చూడండి