SVG Drop Shadows

<defs> နှင့် <filter>

SVG စစ်ထုတ်မှုများအားလုံးကို <defs> ဒြပ်စင်တစ်ခုအတွင်း သတ်မှတ်ထားသည်။ <defs> ဒြပ်စင်သည် အဓိပ္ပါယ်ဖွင့်ဆိုချက်များအတွက် အတိုကောက်ဖြစ်ပြီး အထူးဒြပ်စင်များ (စစ်ထုတ်ခြင်းကဲ့သို့သော) ၏ အဓိပ္ပါယ်ဖွင့်ဆိုချက်ပါရှိသည်။

<filter> ဒြပ်စင်ကို SVG စစ်ထုတ်မှုကို သတ်မှတ်ရန် အသုံးပြုသည်။ <filter> ဒြပ်စင်တွင် စစ်ထုတ်မှုကို သတ်မှတ်ပေးသည့် လိုအပ်သော ID အရည်အချင်းတစ်ခု ရှိသည်။ ထို့နောက် ဂရပ်ဖစ်သည် အသုံးပြုရန် filter ကိုညွှန်ပြသည်။

SVG <feOffset>

ဥပမာ ၁

<feOffset> ဒြပ်စင်ကို drop shadow အကျိုးသက်ရောက်မှုများဖန်တီးရန်အသုံးပြုသည်။ စိတ်ကူးမှာ SVG ဂရပ်ဖစ် (ရုပ်ပုံ သို့မဟုတ် ဒြပ်စင်) ကိုယူပြီး xy လေယာဉ်တွင် အနည်းငယ်ရွှေ့ရန် ဖြစ်သည်။

ပထမဥပမာသည် ထောင့်မှန်စတုဂံတစ်ခု ( <feOffset> ဖြင့်)၊ ထို့နောက် အော့ဖ်ဆက်ပုံ၏ထိပ်တွင် မူရင်းကို ရောနှောပါ ( <feBlend> ဖြင့်) ။

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

• <filter> ဒြပ်စင်၏ id attribute သည် filter အတွက် ထူးခြားသောအမည်ကို သတ်မှတ်သည်။
• <rect> element ၏ filter attribute သည် element ကို "f1" filter သို့ ချိတ်ဆက်သည်။

ဥပမာ ၂

ယခု၊ အော့ဖ်ဆက်ပုံသည် မှုန်ဝါးနိုင်သည် ( <feGaussianBlur> ဖြင့်)

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

• <feGaussianBlur> ဒြပ်စင်၏ stdDeviation attribute သည် မှုန်ဝါးမှုပမာဏကို သတ်မှတ်သည်

ဥပမာ ၃

ယခု အရိပ်ကို အနက်ရောင်ဖြစ်အောင် လုပ်ပါ။

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

• <feOffset> ဒြပ်စင်၏ ရည်ညွှန်းချက်တွင် RGBA pixel တစ်ခုလုံးအစား မှုန်ဝါးမှုအတွက် Alpha ချန်နယ်ကို အသုံးပြုသည့် "SourceAlpha" သို့ ပြောင်းထားသည်။

ဥပမာ ၄

ယခု အရိပ်ကို အရောင်အဖြစ် ဆက်ဆံပါ။

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

• အော့ဖ်ဆက်ပုံရှိ အရောင်များကို အနက်ရောင်အဖြစ်သို့ ပြောင်းလဲရန် <feColorMatrix> စစ်ထုတ်မှုကို အသုံးပြုသည်။ matrix ရှိ '0.2' ၏ တန်ဖိုးသုံးခုလုံးကို အနီရောင်၊ အစိမ်းနှင့် အပြာလိုင်းများဖြင့် မြှောက်ထားသည်။ ၎င်းတို့၏တန်ဖိုးများကို လျှော့ချခြင်းဖြင့် အရောင်များကို အနက်ရောင်နှင့် ပိုမိုနီးစပ်စေသည် (အနက်ရောင်သည် 0)