در جلسه قبل با روش استفاده از SVG در فضای وب آشنا شدیم. در این جلسه قصد داریم در رابطه با فیلترها و افکت‌ها صحبت کنیم.
قسمت های قبلی
فیلترها و افکت‌ها در SVG
فیلترها در SVG معمولا در المان defs پیاده‌سازی می‌شود و بعدها برای استفاده از آن از طریق قرار دادن آی‌دی از ویژگی‌های آن استفاده می‌کنند. این موضوع می‌تواند از طریق یک خاصیت SVG یا از طریق CSS انجام شود.
فیلترها در SVG قدرتمند هستند و می‌شود از آن‌ها برای ایجاد افکت‌های خیره‌کننده‌ای استفاده کرد! برای استفاده از فیلترها در SVG ما از المان <filter> استفاده می‌کنیم. در داخل این المان ما ابزارهای مختلفی را در اختیار داریم که می‌توانیم از آن‌ها استفاده کنیم: Blend، Color Matrix، Component Transfer، Blur و… . یک فیلتر SVG از ترکیب این موارد با همدیگر به دست می‌آید.
یک فیلتر اولیه معمولا یک یا دو ورودی و در نهایت یک خروجی خواهد داشت. برای ورودی ما دو گزینه اصلی را در اختیار داریم:
۱- SourceGraphic: منبع اصلی المان های گرافیکی (text، Shapes و...) ما از اینجاست.
۲- SourceAlpha: تنها قسمت‌های مات که از کانال اولیه ما در منبع گرافیک می‌آید را شامل می‌شود.
تعدادی از فیلترها را که می‌شود از آن ها استفاده کنید را در زیر نوشته‌ایم. فیلترها می‌توانند بسیار پیچیده باشند، ما در زیر تنها مواردی ساده را گفته‌ایم.
Blur
از فیلتر Blur می‌توان برای محو کردن یک المان استفاده کرد. برای استفاده از این حالت از المان <feGaussianBlur> استفاده کنید و برای مقدار دهی کردن باید خاصیت stdDeviation را فراخوانی کنید:
<feGaussianBlur stdDeviation="25" />
Offset
فیلتر Offset برای موقعیت‌دهی به المان‌ها استفاده می‌شود. برای استفاده از این فیلتر باید از المان <feOffset> استفاده کنید و مقدار آن را با استفاده از خاصیت dx و dy کنترل کنید. این مقادیر مختصات عرض و طول مربوط به میزان انحراف را دریافت می‌کنند. معمولا این فیلتر همراه با مقداری Blur ترکیب شده و حالتی شبیه به یک سایه را بوجود می‌آورد.
<feOffset dx="15" dy="15" />
Colour Matrix
از این فیلتر برای استفاده کردن از چندین رنگ به حالت transform است. در این حالت رنگ‌های مختلف برای تبدیل شدن به یکدیگر حالت دگرگونی را به خود می‌گیرند. برای استفاده از این فیلتر می‌توانید المان <feColorMatrix> را نوشته و برای مقدار دهی از مقادیر type و values استفاده کنید:
<feColorMatrix type="hueRotate" values="171" />
Turbulence
فیلتر مربوط به Turbulence برای ایجاد نویس‌ها و الگوهای متنی هوشمندانه استفاده می‌شود. برای استفاده از این فیلتر می‌توانید المنت <feTurbulence> را نوشته و با استفاده از خاصیت‌های متفاوت آن را مقداردهی کنید:
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
Morphology
از این فیلتر برای برش دادن و یا گسترش قسمت خاصی استفاده می‌شود. برای پیاده‌سازی از المان <feMorphology> استفاده کنید، هچنین برای کنترل کردن آن می‌توانید خاصیت operator و radius را به کار ببرید.
<feMorphology operator="erode" radius="1"/>
<feMorphology operator="dilate" radius="1"/>
چگونه یک فیلتر را ایجاد کنیم؟
۱. ماه را پیدا کنید
برای اینکه یک فیلتر جدید را ایجاد کنیم، نیاز است که بعد از ایجاد طرح SVG ماه را در DOM پیدا کنیم. می‌توانیم با استفاده از ابزارهای توسعه این فرایند را تسریع ببخشیم. (منظور از ماه یک منبع برای نور است که طراحی جلوه طبیعی‌تری داشته باشد)
<circle class="the-moon" .../>
۲. فیلتر را ایجاد کنید
در داخل تگ defs می‌توانیم فیلتر خودمان را با استفاده از المان filter ایجاد کنیم. در داخل فیلتر ما از المان feTurbulence برای ایجاد نویز استفاده می‌کنیم.
<filter id="noise" y="0" x="0">
<feTurbulence stitchTiles="stitch" baseFrequency=".75" type="fractalNoise" />
</filter>
۳. ایجاد المان الگو
در جهت استفاده از فیلتر نویز ما می‌توانیم یک المان الگو را ایجاد کنیم. برای اینکار می‌توانیم از تگ defs استفاده کنیم و بعدا آن را به دیگر المان‌ها بدهیم.
۴. الگو را رسم کنید
در داخل المنت الگو نیاز است که مستطیل‌هایی را ایجاد کنیم. ما این کار با ایجاد یک مورد برای پس زمینه شروع می‌کنیم.
<pattern ...>
<rect width="100%" height="100%" fill="white" />
</pattern>
۵. پترن را تمام کنید
بعد از اینکه پس زمینه مستطیل شکل ما ایجاد شد ما یک مورد دیگر را نیز اضافه می‌کنیم و فیلتر را به آن اعمال می‌کنیم:
<pattern ...>
...
<rect width="100%" height="100%" filter="url(#noise)" opacity=".9" />
</pattern>
۶. اعمال پترن روی ماه
حال که ما پترن را ایجاد کردیم و آن را اعمال نمودیم، تنها چیزی که باقی مانده است انتخاب المانی است که می‌خواهیم. در این مثال ما از CSS استفاده کرده‌ایم، البته می‌توانید در همان SVG نیز چنین کاری را انجام دهید:
.the-moon {
fill: url(#moon-texture);
}
نکته: موارد گفته شده در فرایند ایجاد این پروژه دخیل بوده است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید