HTML တွင် SVG
သင်၏ HTML စာမျက်နှာများတွင် SVG အစိတ်အပိုင်းများကို တိုက်ရိုက်ထည့်သွင်းနိုင်သည်။
SVG ကို HTML စာမျက်နှာများတွင် တိုက်ရိုက်ထည့်ပါ။
ဤသည်မှာ ရိုးရှင်းသော SVG ဂရပ်ဖစ်၏ ဥပမာတစ်ခုဖြစ်သည်။
ဒီမှာ HTML ကုဒ်။
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG ကုဒ် ရှင်းလင်းချက်
- SVG ရုပ်ပုံသည် <svg> ဒြပ်စင်တစ်ခုဖြင့် စတင်သည်။
- <svg> ဒြပ်စင်၏ အကျယ်နှင့် အမြင့် ရည်ညွှန်းချက်များသည် SVG ပုံ၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်သည်။
- စက်ဝိုင်းပုံဆွဲရန် <circle> element ကိုအသုံးပြုသည်။
- cx နှင့် cy attribute များသည် စက်ဝိုင်း၏ အလယ်ဗဟို၏ x နှင့် y ကိုသြဒိနိတ်များကို သတ်မှတ်သည်။ cx နှင့် cy ကို မသတ်မှတ်ပါက၊ စက်ဝိုင်း၏ အလယ်ဗဟိုကို (0, 0) ဟု သတ်မှတ်ထားသည်
- r attribute သည် စက်ဝိုင်း၏ အချင်းဝက်ကို သတ်မှတ်သည်။
- လေဖြတ်ခြင်းနှင့် လေဖြတ်ခြင်း အကျယ်အဝန်း ရည်ညွှန်းချက်များသည် ပုံသဏ္ဍာန်တစ်ခု၏ ကောက်ကြောင်းပုံပေါ်ပုံကို ထိန်းချုပ်သည်။ ကျွန်ုပ်တို့သည် စက်ဝိုင်း၏ ကောက်ကြောင်းကို 4px အစိမ်းရောင် "ဘောင်" အဖြစ် သတ်မှတ်သည် ။
- ဖြည့်စွက်ရည်ညွှန်းချက်သည် စက်ဝိုင်းအတွင်းရှိ အရောင်ကို ရည်ညွှန်းသည်။ ဖြည့်စွက်အရောင်ကို အဝါရောင်အဖြစ် သတ်မှတ်သည်။
- အပိတ် </svg> tag သည် SVG ပုံအား ပိတ်သည်။
မှတ်ချက်- SVG ကို XML ဖြင့်ရေးထားသောကြောင့်၊ အစိတ်အပိုင်းအားလုံးကို ကောင်းစွာပိတ်ရပါမည်။