اضافه کردن سایه ها به نمادهای SVG با فیلترهای CSS و SVG

از آنجا که ما در حال تهیه لیست هستیم ، دو روش اصلی وجود دارد که می توانیم سایه ها را در SVG اعمال کنیم:

1. با استفاده از ویژگی CSS Filter ()
2. با استفاده از SVG

بله ، هر دو شامل فیلترها هستند! و ، بله ، هر دو CSS و SVG انواع فیلترهای خاص خود را دارند. اما بین اینها نیز متقاطع وجود دارد. به عنوان مثال ، یک فیلتر CSS می تواند به SVG مراجعه کند. یعنی اگر ما به جای SVG درون خطی کار می کنیم ، مثلاً SVG که به عنوان یک تصویر پس زمینه در CSS استفاده می شود.

آنچه شما نمی توانید استفاده کنید: ویژگی CSS Box-Shadow. این معمولاً برای سایه ها استفاده می شود ، اما از لبه های مستطیل شکل خارج از عناصر پیروی می کند ، نه لبه های عناصر SVG مانند آنچه ما می خواهیم. در اینجا میشل بارکر با توضیح روشنی است:

اگر از قلم نماد SVG استفاده می کنید ، همیشه سایه متن وجود دارد. این واقعاً کار خواهد کرد. اما بیایید روی آن دو مورد اول تمرکز کنیم زیرا آنها مطابق با اکثر موارد استفاده هستند.

سایه هایی با فیلترهای CSS

ترفند استفاده از سایه مستقیم به SVG از طریق فیلترهای CSS عملکرد Drop-Shadow () است:

سایه ای که از 3px به صورت افقی شروع می شود ، 5px به پایین ، با 2px از تاری و 40 ٪ سیاه است. در اینجا چند نمونه از آن آورده شده است:

این داده های پشتیبانی مرورگر از Caniuse است که جزئیات بیشتری دارد. تعدادی نشان می دهد که مرورگر از ویژگی در آن نسخه و بالاتر پشتیبانی می کند.

دسکتاپ

سیار / رایانه لوحی

با یک فیلتر SVG در داخل فیلتر CSS تماس بگیرید

بگویید ما یک فیلتر SVG در HTML داریم:

ما می توانیم از فیلتر CSS استفاده کنیم تا به جای مقادیری که قبلاً دیدیم ، فیلتر SVG را با شناسه فراخوانی کنیم:

اکنون که فیلتر از HTML گرفته شده و در CSS ارجاع شده است ، که آن را اعمال می کند.

با استفاده از ابتدای فیلتر SVG

شاید تعجب کنید که چگونه ما آن SVG را به کار گرفتیم. برای ایجاد سایه قطره ای با فیلتر SVG ، از یک فیلتر بدوی استفاده می کنیم. یک فیلتر اولیه در SVG عنصری است که نوعی تصویر یا گرافیک را به عنوان ورودی می گیرد ، سپس آن تصویر یا گرافیک آن را هنگام فراخوانی می کند. آنها مانند فیلترها در یک برنامه ویرایش گرافیکی کار می کنند ، اما به صورت کد و فقط در یک عنصر SVG قابل استفاده هستند.

در SVG بسیاری از ابتدای فیلتر مختلف وجود دارد. موردی که ما به آن رسیدیم است. من به شما اجازه می دهم فقط با نگاه کردن به نام چه کاری انجام دهید.

بنابراین ، مشابه نحوه عملکرد ما این کار را با فیلتر CSS انجام داد:

... ما می توانیم با فیلتر SVG بدوی همان کار را انجام دهیم. سه ویژگی اصلی وجود دارد که ارزش فراخوانی آنها را دارند زیرا آنها به تعریف ظاهر سایه قطره کمک می کنند:

• DX-این موقعیت سایه را در امتداد محور x تغییر می دهد.
• DY-این موقعیت سایه را در امتداد محور y تغییر می دهد.
• stddeviation - این انحراف استاندارد را برای عملکرد تاری Drop Shadow تعریف می کند. ویژگی های دیگری نیز وجود دارد که می توانیم از آنها استفاده کنیم ، مانند رنگ سیل برای تنظیم رنگ سایه قطره ، و ظرفیت سیل برای تنظیم کدورت سایه قطره.

این مثال شامل سه عنصر است که هر کدام دارای ابتدایی فیلتر خاص خود هستند.

با استفاده از فیلترهای SVG

فیلترهای SVG بسیار قدرتمند هستند. ما فقط نگاه کردیم ، که البته بسیار مفید است ، اما کارهای بیشتری وجود دارد که آنها می توانند انجام دهند (از جمله جلوه های مانند فتوشاپ) و زیر مجموعه چیزهایی که فقط برای سایه ها می گیریم گسترده است. بیایید به بعضی نگاه کنیم ، مانند سایه های رنگی و سایه های تزئین شده.

بیایید به عنوان نمونه نشانه SVG را برای آرم توییتر بگیریم:

ما برای انجام این اثرات به یک عنصر احتیاج داریم. این باید در یک عنصر در HTML باشد. یک عنصر هرگز به طور مستقیم در مرورگر ارائه نمی شود - فقط به عنوان چیزی استفاده می شود که می تواند از طریق ویژگی فیلتر در SVG یا عملکرد URL () در CSS ارجاع شود.

در اینجا نحو که یک فیلتر SVG را نشان می دهد و آن را در یک تصویر منبع استفاده می کند:

عنصر فیلتر به معنای نگه داشتن اولیه فیلتر به عنوان کودکان است. این یک ظرف برای یک سری عملیات فیلتر است که برای ایجاد جلوه های فیلتر ترکیب شده اند.

این فیلتر های ابتدایی یک عملیات گرافیکی اساسی (به عنوان مثال تار ، حرکت ، پر کردن ، ترکیب یا تحریف) را بر روی یک یا چند ورودی انجام می دهند. آنها مانند بلوک های ساختمانی هستند که در آن می توان از هر فیلتر SVG در رابطه با دیگران استفاده کرد تا اثر ایجاد کند. یک فیلتر محبوب اولیه است که برای افزودن اثر تاری استفاده می شود.

بیایید بگوییم که فیلتر SVG زیر را با: تعریف می کنیم:

هنگامی که روی یک عنصر اعمال می شود ، این فیلتر یک تار گاوسی ایجاد می کند که عنصر را در شعاع 1px روی محور x تار می کند ، اما هیچ تاری روی محور y وجود ندارد. در اینجا نتیجه ، با و بدون اثر آمده است:

استفاده از چندین بدوی در داخل یک فیلتر واحد امکان پذیر است. با این وجود ، باید جلوه های جالبی را ایجاد کنید ، با این حال ، شما باید بدوی های مختلف را از یکدیگر آگاه کنید. Bence Szabó مجموعه ای از الگوهای جالب و دیوانه وار دارد که او از این طریق ایجاد کرده است.

هنگام ترکیب چندین اولیه فیلتر ، اولین ابتدایی از گرافیک اصلی (SourceGraphic) به عنوان ورودی گرافیکی آن استفاده می کند. هر ابتدایی بعدی از نتیجه اثر فیلتر قبل از آن به عنوان ورودی آن استفاده می کند. و غیرهاما ما می توانیم با استفاده از ویژگی های IN ، IN2 و نتیجه در مورد عناصر ابتدایی ، انعطاف پذیری را در مورد آن بدست آوریم. استیون بردلی نوشتن نامه ای عالی در زمینه ابتدایی فیلتر دارد که به سال 2016 باز می گردد ، اما هنوز هم امروز صادق است.

17 بدوی وجود دارد که امروز می توانیم از آنها استفاده کنیم:

به پیشوند FE در مورد همه آنها توجه کنید. این مخفف اثر فیلتر است. درک فیلترهای SVG چالش برانگیز است. اثری مانند سایه inset نیاز به یک نحو کلامی دارد که درک آن بدون درک کامل از تئوری ریاضی و رنگ دشوار است.("عمیق شدن به سایه ها" Rob OLeary مکان مناسبی برای شروع است.)

ما به جای اینکه سوراخ خرگوش همه اینها را پایین بیاوریم ، می خواهیم با برخی از فیلترهای از پیش ساخته کار کنیم. خوشبختانه فیلترهای SVG آماده استفاده زیادی در اطراف وجود دارد.

برای استفاده از Filter Effect در آرم توییتر ، باید آن را در "سند منبع SVG" خود با یک شناسه منحصر به فرد برای مراجعه به برچسب خود اعلام کنیم.

چهار بدوی مختلف در آنجا وجود دارد و هر یک عملکرد متفاوت را انجام می دهد. اما ، با هم ، آنها به یک سایه زایی می رسند.

اکنون که این فیلتر سایه inset را ایجاد کرده ایم ، می توانیم آن را در SVG خود اعمال کنیم. ما قبلاً دیده ایم که چگونه آن را از طریق CSS اعمال کنیم. چیزی مثل:

ما همچنین می توانیم SVG را مستقیماً در نحو SVG با ویژگی فیلتر اعمال کنیم. این مانند:

در اینجا چند نمونه سایه دیگر از Oleg Solomka آورده شده است:

توجه داشته باشید که سایه های اساسی در اینجا احتمالاً کمی پیچیده تر از آنچه لازم است وجود دارد. به عنوان مثال ، سایه رنگی هنوز هم می تواند با مواردی از این دست انجام شود:

اما این اثر برجسته به عنوان یک فیلتر بسیار عالی است!

همچنین توجه داشته باشید که ممکن است فیلترهای SVG را در نحو SVG مانند این مشاهده کنید:

در خط اول آنجا ، این گفته است: این SVG نباید به هیچ وجه ارائه شود - این فقط چیزهایی است که ما قصد داریم بعداً از آنها استفاده کنیم. این برچسب چیزی مشابه می گوید: ما فقط این موارد را برای استفاده بعداً تعریف می کنیم. به این ترتیب ، ما لازم نیست که با نوشتن مطالب بارها و بارها خود را تکرار کنیم. ما فیلتر را با شناسه و نمادها نیز ارجاع خواهیم داد ، شاید مانند:

فیلترهای SVG دارای پشتیبانی گسترده ای (حتی در اینترنت اکسپلورر و لبه!) با عملکرد بسیار سریع هستند.

این داده های پشتیبانی مرورگر از Caniuse است که جزئیات بیشتری دارد. تعدادی نشان می دهد که مرورگر از ویژگی در آن نسخه و بالاتر پشتیبانی می کند.

دسکتاپ

سیار / رایانه لوحی

بسته بندی چیزها

مقایسه نهایی:

• استفاده از فیلترهای CSS آسان تر است ، اما بسیار محدودتر هستند. من فکر نمی کنم به عنوان مثال می توان سایه ای را با عملکرد قطره ای سایه () اضافه کرد.
• فیلترهای SVG بسیار قوی تر اما بسیار پیچیده تر هستند و نیاز به داشتن جایی در HTML دارند.
• هر دو آنها از مرورگر بسیار خوبی برخوردار هستند و در همه مرورگرهای مدرن عملکرد خوبی دارند ، اگرچه فیلترهای SVG دارای عمیق ترین پشتیبانی مرورگر هستند.

در این مقاله ، ما دیده ایم که چرا و چگونه می توان سایه را در نمادهای SVG با نمونه هایی در هر یک استفاده کرد. آیا این کار را کرده اید ، اما آیا این روش دیگری از هر چیزی که به آن نگاه کردیم انجام دادیم؟آیا سعی کرده اید جلوه سایه ای انجام دهید که به نظر شما غیرممکن است؟لطفا به اشتراک بگذارید!

psst! یک حساب دیجیتالی ایجاد کنید و 200 دلار اعتبار رایگان برای میزبانی و خدمات مبتنی بر ابر دریافت کنید.