SVG အစိတ်အပိုင်း

SVG အကျွန်းအစား အသား - <radialGradient>

<radialGradient> အကျွန်းပေါ် အတွင်း အကျွန်းအစား အသား ကို သတ်မှတ်သည်

<radialGradient> အကျွန်းပေါ် အတွင်း <defs> မိုက်တိုမ်း အတွင်း<defs> အကျွန်းပေါ်အား သတ်မှတ်သည် သည် အခြား အအုပ်အုပ် များ (ဧရိယာရှင် သုံး) ကို သတ်မှတ်သည်

ဘား 1

သိပ်သွင်းသွားသော ပန်းပု တစ်ခု ကို အသင်းသီးလုံး အစားအသားကို ပြည့်စုံဖြင့် သုံးစွဲကြရမည်:

ပုံသဏ္ဌာန် SVG စကာတင်:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

ကိုယ်တိုင် ကျင်းပ

စကာတင် အရာများ:

  • <radialGradient> မိုက်တိုမ်း အကိုးအချုပ် သည် သဘောတူ ကို ကိုယ်စားပြုသော ကိုယ်ရေး အမည် ကို သတ်မှတ်သည်
  • cx, cy နှင့် r အကိုးအချုပ် သည် အပြင်ဘက် ဆင်းရဲသော ဆင်းရဲ ကို သတ်မှတ်သည်, fx နှင့် fy သည် အဆိုးဆိုး ဆင်းရဲ ကို သတ်မှတ်သည်
  • သဘောတူ အစားအသား ပတ်ဝန်းကျင် သည် နှစ်မျိုးမှ အပိုင်းအခြား သဘောတူ များ ဖြင့် ဖြစ်သည်။ အခြား သဘောတူ သည် ယူကျင် <stop> မိုက်တိုမ်း ဖြင့် သတ်မှတ်သည်
  • offset အကိုးအချုပ် သည် သဘောတူ အစားအသား စတင်နှင့် အဆုံးပါ နေရာ ကို သတ်မှတ်သည်
  • fill အကိုးအချုပ် သည် ပန်းပု အအုပ်အုပ် ကို သိပ်သွင်းသွားသော သဘောတူကို ဆက်ထားသည်

ဘား 2

သိပ်သွင်းသွားသော ပန်းပု တစ်ခု ကို အသင်းသီးလုံး အစားအသားကို ပြည့်စုံဖြင့် သုံးစွဲကြရမည်:

ပုံသဏ္ဌာန် SVG စကာတင်:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

ကိုယ်တိုင် ကျင်းပ