سبد (0)

ایجاد سایه در SVG

<defs> و <filter>

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

از عنصر <filter> برای تعریف یک فیلتر در SVG استفاده می شود. عنصر <filter> دارای یک id یکتا است که این فیلتر را مشخص می کند. از این آی دی برای اتصال فیلتر مورد نظر به یک گرافیک استفاده می شود. 


 <feOffset> در SVG

مثال 1

از عنصر <feOffset> برای ایجاد افکت سایه استفاده می شود. راه حل این است که یک گرافیک SVG (مانند یک عکس یا عنصر) را بگیریم و سپس آن را کمی در صفحه ی xy جابه جا کنیم. 

در مثال زیر، با استفاده از عنصر <feOffset> یک مستطیل را ایجاد می کنیم و سپس مستطیل اصلی را در بالای عکس منحرف شده قرار می دهیم( با استفاده از <feBlend>):

feoffset

کد 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> درواقع یک نام یکتا را برای این فیلتر مشخص می کند. 
  • خصوصیت filter در عنصر <rect> این عنصر را به فیلتر با آی دی f1 متصل می کند. 

مثال 2

اکنون می توانیم تصویر منحرف شده را شفاف کنیم( با استفاده از <feGaussianBlur>):

feoffset2

کد 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> قرار دارد، مقدار blur(محو شدگی) را مشخص می کند. 

مثال 3

اکنون سایه را به رنگ سیاه در می آوریم:

feoffset3

کد 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>
خودتان امتحان کنید »

توضیح کد بالا:

  • مقدار خصوصیت in را در عنصر <feOffset> به "SourceAlpha" تغییر داده ایم. و این باعث می شود که به جای رنگ های RGBA از مجرای Alpha استفاده کنیم و عکس ما تیره شود. 

مثال 4

اکنون سایه را به صورتی رنگی شده در می آوریم:

feoffset4

کد 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 است).
 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه