SVG ফুজ ইফেক্ট

<defs> এবং <filter>

সকল SVG ফিল্টারগুলি <defs> উপাদানের মধ্যে ডিফাইন করা<defs> উপাদানটি ডিফাইনিশনের সংক্ষিপ্ত রূপ, যা বিশেষ উপাদান (যেমন ফিল্টার) ডিফাইন করে

<filter> উপাদানটি SVG ফিল্টারকে ডিফাইন করে<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 অ্যাট্রিবিউট ফুজ পরিমাণ নির্দিষ্ট করে
  • <rect> ইলিমেন্টের filter অ্যাট্রিবিউট তা এই "f1" ফিল্টারের সাথে সংযুক্ত করে