SVG <ellipse>
SVG Ellipse - <ellipse>
ellipse ကို ဖန်တီးရန်အတွက် <ellipse> ဒြပ်စင်ကို အသုံးပြုသည်။
ellipse သည် စက်ဝိုင်းတစ်ခုနှင့် နီးကပ်စွာ ဆက်စပ်နေသည်။ ခြားနားချက်မှာ ellipse တွင် x နှင့် ay အချင်းဝက် တစ်ခုနှင့်တစ်ခု ခြားနားပြီး စက်ဝိုင်းတစ်ခုသည် x နှင့် y အချင်းဝက် ညီမျှသည် ။
ဥပမာ ၁
အောက်ပါဥပမာသည် ellipse ကိုဖန်တီးသည်-
ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်
ဥပမာ
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
ကုဒ်၏ ရှင်းလင်းချက်
- cx attribute သည် ellipse ၏ အလယ်ဗဟို၏ x သြဒီနိတ်ကို သတ်မှတ်သည်။
- cy attribute သည် ellipse ၏ အလယ်ဗဟို၏ y သြဒီနိတ်ကို သတ်မှတ်သည်။
- rx attribute သည် အလျားလိုက် အချင်းဝက်ကို သတ်မှတ်သည်။
- ry attribute သည် vertical radius ကို သတ်မှတ်သည်။
ဥပမာ ၂
အောက်ဖော်ပြပါ ဥပမာသည် တစ်ခုနှင့်တစ်ခုအပေါ်တွင် ellipses သုံးခု ဖန်တီးသည်-
ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်
ဥပမာ
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
</svg>
ဥပမာ ၃
အောက်ဖော်ပြပါ ဥပမာသည် ellipses နှစ်ခု (အဝါရောင်တစ်ခုနှင့် အဖြူရောင်တစ်ခု) ကို ပေါင်းစပ်ထားသည်။
ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်
ဥပမာ
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30"
style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:white" />
</svg>