SVG ఫ్లాట్ ఇఫెక్ట్

<defs> మరియు <filter>

అన్ని SVG కేంద్రకాలు <defs> కేంద్రకం లో నిర్వచించబడింది.<defs> కేంద్రకం సూచించబడింది అనేది స్పష్టతను సృష్టించడానికి ఉపయోగించబడుతుంది.

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

SVG <feGaussianBlur>

ఉదాహరణ 1

<feGaussianBlur> మొదటి కేంద్రకం స్పష్టతను సృష్టించడానికి ఉపయోగించబడుతుంది:

ఇది SVG కోడ్:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

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

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

  • <filter> కేంద్రకం యొక్క id అంశం ముక్తిని సూచిస్తుంది
  • <feGaussianBlur> కేంద్రకం మొదలుకొని స్పష్టతను నిర్వచించబడింది
  • in="SourceGraphic" అనేది మొత్తం కేంద్రకం ప్రభావాన్ని సృష్టించడానికి నిర్వచించబడింది
  • stdDeviation 属性定义模糊量
  • 元素的 filter 属性将该元素链接到 "f1" 滤镜