ایجاد سایه در SVG
<defs> و <filter>
تمام فیلترهای SVG در داخل یک عنصر <defs> تعریف می شوند. عنصر <defs> مخفف کلمه ی definitions است و عناصر خاص را تعریف می کند( مانند فیلترها).
از عنصر <filter> برای تعریف یک فیلتر در SVG استفاده می شود. عنصر <filter> دارای یک id یکتا است که این فیلتر را مشخص می کند. از این آی دی برای اتصال فیلتر مورد نظر به یک گرافیک استفاده می شود.
<feOffset> در SVG
مثال 1
از عنصر <feOffset> برای ایجاد افکت سایه استفاده می شود. راه حل این است که یک گرافیک SVG (مانند یک عکس یا عنصر) را بگیریم و سپس آن را کمی در صفحه ی xy جابه جا کنیم.
در مثال زیر، با استفاده از عنصر <feOffset> یک مستطیل را ایجاد می کنیم و سپس مستطیل اصلی را در بالای عکس منحرف شده قرار می دهیم( با استفاده از <feBlend>):
کد SVG در زیر قرار دارد:
مثال
<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>):
کد SVG در زیر قرار دارد:
مثال
<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
اکنون سایه را به رنگ سیاه در می آوریم:
کد SVG در زیر قرار دارد:
مثال
<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
اکنون سایه را به صورتی رنگی شده در می آوریم:
کد SVG مورد نظر در زیر قرار دارد:
مثال
<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 است).
- نوشته شده توسط احسان عباسی
- بازدید: 3804
