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

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)" />

亲自试一试

代码解释：

  • <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)" />

亲自试一试

ఉదాహరణ 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

亲自试一试

代码解释：

  • 元素用于添加文本