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

<defs> మరియు <filter>

అన్ని SVG ఫిల్టర్స్ <defs> అంశంలో నిర్వచించబడింది.<defs> అంశం నిర్వచించబడింది.

<filter> అంశం ఉపయోగిస్తారు, SVG ఫిల్టర్స్ నిర్వచిస్తారు.<filter> అంశం ఒక అవసరమైన id అంశం కలిగి ఉంటుంది, దీని ద్వారా ఫిల్టర్ను గుర్తించవచ్చు. అప్పుడు చిత్రం ఫిల్టర్ను ఉపయోగించడానికి మార్గదర్శిస్తుంది.

SVG <feOffset>

ఉదాహరణ 1

<feOffset> అంశం మరియు గోచరించడానికి ఉపయోగిస్తారు. ఆలోచన ఉంది: మొదటి ఒక SVG చిత్రాన్ని లేదా అంశాన్ని పొంది, xy ప్లానంలో కొంచం చేరుస్తారు.

మొదటి ఉదాహరణలో ఒక రెక్టాంజిల్ని సరికొను చేసింది (ఉపయోగించండి <feOffset>），అప్పుడు మూల చిత్రాన్ని సరికొను చిత్రంపై కలపవచ్చు (ఉపయోగించండి <feBlend>）：

ఇది SVG కోడ్:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="పసుపు" filter="url(#f1)" />
</svg>

స్వయంగా ప్రయత్నించండి

కోడ్ వివరణాలు:

• <filter> పెట్టుకొను అంశం id అంశం ఫిల్టర్కు ఏకైక నామం నిర్వచిస్తుంది
• <rect> పెట్టుకొను అంశం ఫిల్టర్ అంశం ఈ పెట్టుకొనును "f1" ఫిల్టర్కు జంతుమారు

ఉదాహరణ 2

ఇప్పుడు, చిత్రాన్ని మెరుగుదల చేయవచ్చు (ఉపయోగించండి <feGaussianBlur>）：

ఇది SVG కోడ్:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="పసుపు" filter="url(#f2)" />
</svg>

స్వయంగా ప్రయత్నించండి

కోడ్ వివరణాలు:

• <feGaussianBlur> పెట్టుకొను అంశం stdDeviation అంశం మెరుగుదల పరిమాణాన్ని నిర్వచిస్తుంది

ఉదాహరణ 3

ఇప్పుడు, ముసుగును బ్లాక్ గా సెట్ చేయండి:

ఇది SVG కోడ్:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

స్వయంగా ప్రయత్నించండి

కోడ్ వివరణాలు:

• <feOffset> ఎలిమెంట్ యొక్క in అంశాన్ని "SourceAlpha" గా మార్చడం జరుగుతుంది, ఇది మొత్తం RGBA పిక్సెల్స్ కి బదులుగా ఆల్ఫా చానెల్ను ఉపయోగిస్తుంది మరియు బ్లర్ చేస్తుంది

ఉదాహరణ 4

ఇప్పుడు, ముసుగును ఒక రంగుగా ప్రసంగించండి:

ఇది SVG కోడ్:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

స్వయంగా ప్రయత్నించండి

కోడ్ వివరణాలు:

• <feColorMatrix> ఫిల్టర్ ఉపయోగిస్తుంది సమ్మిళిత చిత్రంలో రంగులను బ్లాక్ కాకుండా చాలా సమీపంగా రూపొందించడానికి. మాట్రిక్స్ లోని మూడు '0.2' విలువలను రెడ్, గ్రీన్ మరియు బ్లూ చానెల్స్ లో గుణిస్తారు. వాటి విలువలను తగ్గించడం రంగులను బ్లాక్ కాకుండా చాలా సమీపంగా చేస్తుంది (బ్లాక్ 0)