ఎస్విజి లీనర్ గ్రేడియంట్

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

SVG గ్రేడియంట్

గ్రేడియంట్ ఒక రంగు నుండి మరొక రంగుకు సుమారు సమస్తంగా పరివర్తన ఉంటుంది. అలాగే, ఒకే ఎలమెంట్లో పలు రంగుల పరివర్తనను వాడవచ్చు.

సివి లో, ప్రధానమైన గ్రేడియంట్ రకాలు రెండు ఉన్నాయి:

  • లీనియర్ గ్రేడియంట్
  • రేడియల్ గ్రేడియంట్

లీనియర్ గ్రేడియంట్

<linearGradient> టాగ్ సివి యొక్క లీనియర్ గ్రేడియంట్ ని నిర్వచించడానికి ఉపయోగించబడుతుంది.

<linearGradient> టాగ్ ను <defs> లోపల నిర్వహించాలి. <defs> టాగ్ దర్శనికంగా, గ్రేడియంట్ వంటి ప్రత్యేక ఎలమెంట్స్ ను నిర్వచించడానికి ఉపయోగించబడుతుంది.

లీనియర్ గ్రేడియంట్ హోరిజంటల్, వెర్టికల్ లేదా కోణాకార గ్రేడియంట్ గా నిర్వచించబడవచ్చు:

  • 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>

ఉదాహరణను చూడండి (ఊర్ధ్వ గ్రేడియంట్)