تدرج خطی SVG

<defs> و <filter>

تمام فیلترهای SVG در <defs> در این عنصر تعریف شده.<defs> عنصر به معنای تعریف‌ها (definitions) است و شامل تعریف عناصر خاص (مثل فیلترها) است.

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

آزمایش کنید

توضیح کد:

• ویژگی id عناصر <filter> نام منحصر به فرد فیلتر را تعریف می‌کند
• <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 عناصر <feGaussianBlur> مقدار تارگی را تعریف می‌کند

مثال 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" تغییر می‌دهد، که از کانال Alpha به جای پیکسل‌های 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) می‌شود