SVG Gradients - Linear

SVG Gradients

Gradient သည် အရောင်တစ်ခုမှ အခြားတစ်ခုသို့ ချောမွေ့စွာ ကူးပြောင်းမှုတစ်ခုဖြစ်သည်။ ထို့အပြင်၊ များစွာသောအရောင်အပြောင်းအလဲများကို တူညီသောဒြပ်စင်သို့ အသုံးချနိုင်သည်။

SVG တွင် gradient အမျိုးအစား နှစ်မျိုးရှိသည်။

• တစ်ပြေးညီ
• Radial

SVG Linear Gradient - <linearGradient>

<linearGradient> ဒြပ်စင်အား မျဉ်းကြောင်းအတိုင်း gradient ကို သတ်မှတ်ရန် အသုံးပြုသည်။

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

အလျားလိုက်၊ ဒေါင်လိုက် သို့မဟုတ် ထောင့်ဖြတ်အဆင့်များအဖြစ် သတ်မှတ်နိုင်သည်-

• y1 နှင့် y2 သည် ညီမျှပြီး x1 နှင့် x2 ကွာခြားသောအခါ အလျားလိုက် gradient များကို ဖန်တီးသည်
• x1 နှင့် x2 သည် ညီမျှပြီး y1 နှင့် y2 ကွာခြားသောအခါ ဒေါင်လိုက် gradient များကို ဖန်တီးသည်။
• x1 နှင့် x2 ကွာခြားပြီး y1 နှင့် y2 ကွာခြားသောအခါ Angular gradient များကို ဖန်တီးသည်

ဥပမာ ၁

အဝါရောင်မှ အနီရောင်သို့ အလျားလိုက်မျဉ်းဖြောင့်မျဉ်းကြောင်းဖြင့် ဘဲဥပုံတစ်ခုကို သတ်မှတ်ပါ-

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

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

• <linearGradient> tag ၏ id attribute သည် gradient အတွက် ထူးခြားသောအမည်ကို သတ်မှတ်ပေးပါသည်။
• <linearGradient> tag ၏ x1၊ x2၊ y1၊y2 ရည်ညွှန်းချက်များသည် gradient ၏ အစနှင့်အဆုံး အနေအထားကို သတ်မှတ်သည်
• gradient တစ်ခုအတွက် အရောင်အကွာအဝေးကို အရောင်နှစ်မျိုး သို့မဟုတ် ထို့ထက်ပိုသော အရောင်များဖြင့် ပေါင်းစပ်နိုင်ပါသည်။ အရောင်တစ်ခုစီကို <stop> tag ဖြင့် သတ်မှတ်ထားသည်။ အော့ဖ်ဆက် attribute ကို gradient အရောင်၏အစနှင့်အဆုံးနေရာတွင်သတ်မှတ်ရန်အသုံးပြုသည်။
• ဖြည့်စွက်ရည်ညွှန်းချက်သည် ellipse element ကို gradient နှင့် ချိတ်ဆက်ထားသည်။

ဥပမာ ၂

အဝါရောင်မှ အနီရောင်သို့ ဒေါင်လိုက်မျဉ်းဖြောင့်အရောင်ဖြင့် ဘဲဥပုံတစ်ခုကို သတ်မှတ်ပါ-

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

ဥပမာ ၃

အဝါရောင်မှ အနီရောင်သို့ အလျားလိုက်မျဉ်းစောင်းဖြင့် အလျားလိုက်မျဉ်းစောင်းဖြင့် ellipse ကို သတ်မှတ်ပြီး ellipse အတွင်းရှိ စာသားကို ထည့်ပါ-

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

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

• စာသားထည့်ရန် <text> အစိတ်အပိုင်းကို အသုံးပြုသည်။