HTML <svg> အချက်
အသုံးပြုခြင်း နှင့် အသုံးချခြင်း
<svg> အခြေခံ အမှတ် <svg> က အရည်အချင်းကို သတ်မှတ်သည်。
SVG တွင် လက်ဆွဲပုံများ၊ အကွက်အဆိုင်းများ၊ ပန်းပုံများ၊ စာသားများ နှင့် ပုံများကို ဖြတ်သိမ်းရန် မျိုးမျိုးသော နည်းလမ်းများ ရှိသည်。
SVG နှင့် ပတ်သတ်၍ ပိုမိုသိရှိရန် ကျမ်းကို ကြည့်ပါ SVG ပြန်လည်သုံးသပ်。
အခြား လျှပ်ပေး
HTML အခြေခံပြားHTML SVG
SVG အခြေခံပြားSVG ပြန်လည်သုံးသပ်
အကျိုးဆက်
ဘာသာ 1
ပန်းပုံများကို လုပ်ရန်
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
ဘာသာ 2
လက်ဆွဲပုံများကို ဖြတ်သိမ်းရန်
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
ဘာသာ 3
အကွက်အဆိုင်း အဆိုင်းရာ လုပ်ရန်
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
ဘာသာ 4
ပန်းပုံများကို လုပ်ရန်
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
ဘာသာ 5
ပြည်ထောင်စု ရုပ်ပုံများကို ဖြတ်သိမ်းရန်
<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> </svg>
ဘတ်ယာဉ် ထောက်ပံ့
အချက်အလက် တွင် အမှတ်အသား ကြောင်း ပထမဆုံး လွဲသည့် ဘတ်ယာဉ် မူကျင် အဆင့် ကို ရည်ညွှန်းထားသည်။
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
