SVG লাইনার গ্রেডিয়েন্ট

和

所有 SVG 滤镜都在 <defs> 元素中定义。<defs> 元素是定义（definitions）的缩写，包含对特殊元素（比如滤镜）的定义。

元素用于定义 SVG 滤镜。 元素有一个必需的 id 属性，用于标识滤镜。然后图形会指向要使用的滤镜。

SVG

例子 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="yellow" filter="url(#f1)" />
</svg>

স্বয়ং প্রয়োগ করুন

কোড বিবরণ:

• <filter> এলিমেন্টের id অ্যাট্রিবিউট ফিল্টারকে একক নাম নির্ধারণ করে
• <rect> এলিমেন্টের filter অ্যাট্রিবিউট এই এলিমেন্টকে "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="yellow" filter="url(#f2)" />
</svg>

স্বয়ং প্রয়োগ করুন

কোড বিবরণ:

• জিএসএমএল এলিমেন্টের 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 হিসাবে)