SVG <rect>

SVG အရောက်အထား

SVG တွင် ပြင်ဆင်သူများ အသုံးပြုနိုင်သော စံပုံအရောက်အထားများရှိသည်:

• ပန်းကြီး <rect>
• နှစ်နတ်မြောက် <circle>
• အန္တရာယ်ပုံ <ellipse>
• ရှည်လျားသောလမ်း <line>
• ပြောင်းလဲသောလမ်း <polyline>
• ပေါင်းစပ်ပုံ <polygon>
• လမ်း <path>

နောက်လာမည့်စာအုပ်များမှာ rect အီအီး စတင်ပြောကြားပါမည်。

SVG ပန်းကြီး - <rect>

နာမည် 1

<rect> အရာအုပ် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း နှင့် ဆုံးမျဉ်းတန်း အပြော်ပြောင်း အပေါ်လုံး ဖန်တီးခြင်း

ဒီ အကြောင်းပြီး အမေးအတွက် SVG ကိုယ်စားပြီး

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

亲自试一试

代码解释：

• <rect> အရာအုပ် ကိုယ်စားပြီး အရာအုပ် အရှည် နှင့် အရှည် အတွက် width နှင့် height အချက်အလက် ကြောင်းတင်ခ�င်း
• style အချက်အလက် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း အချက်အလက် အတွက် ကြောင်းတင်ခ�င်း
• CSS အောက်ဆီယပ် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း ပြည်း အတွက် ကြောင်းတင်ခ�င်း
• CSS အနောက်ဆီယပ်-ပုံစံ ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း ပုံစံ အတွက် ပုံစံ
• CSS အနောက်ဆီယပ် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း အရေးအသား အတွက် ကြောင်းတင်ခြင်း

အမှတ် 2 အကြောင်းအရာ

အခြား အကြောင်းအရာ တစ်ခု ကို ကြည့်ကြလို့ ကျွန်ုပ် သည် အသစ် အချက်အလက် အရ ကြည့်ရမည်

ဒီ အကြောင်းပြီး အမေးအတွက် SVG ကိုယ်စားပြီး

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

亲自试一试

代码解释：

• x အချက် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း အခြေခံ အရာ အတွက် ဆိုင်းရိုး အရှိုးအနောက် စီးရီး အနေ�ြင့် ထားသည် (ဥပမာ x="50" က ဆိုင်းရိုး အရှိုးအနောက် 50 px ထားသည်)
• y အချက် ကိုယ်စားပြီး ဆုံးမျဉ်းတန်း အခြေခံ အရာ အတွက် အရှိုးအနောက် စီးရီး အနေဖြင့် ထားသည် (ဥပမာ y="20" က ဆုံးမျဉ်းတန်း အရှိုးအနောက် 20 px အရှိုးအနောက် ထားသည်)
• CSS အောက်ဆီယပ်-အောက်ဆီယပ် ကိုယ်စားပြီး ပြည်းမျဉ်း အရေးအား အတွက် မတ်တ်သော လုံးချိန်ထားသည် (အခွင့်အရေး ပြင်းအား: 0 မှ 1)
• CSS အနောက်ဆီယပ်-အောက်ဆီယပ် ကိုယ်စားပြီး အစင်းရေး အရေးအား အတွက် မတ်တ်သော လုံးချိန်ထားသည် (အခွင့်အရေး ပြင်းအား: 0 မှ 1)

အမှတ် 3 အကြောင်းအရာ

အရာအုပ် အတွက် မတ်တ်သော လုံးချိန်ထားသည်

ဒီ အကြောင်းပြီး အမေးအတွက် SVG ကိုယ်စားပြီး

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />

亲自试一试

代码解释：

• CSS အောက်ဆီယပ် ကိုယ်စားပြီး အရာအုပ် အတွက် မတ်တ်သော လုံးချိန်ထားသည် (အခွင့်အရေး ပြင်းအား: 0 မှ 1)

အမှတ် 4 အကြောင်းအရာ

နောက်ဆုံး အကြောင်းအရာမှာ နံပါတ် ပုံစံ အရ ဆင်းနံ့သော ကြီးပြင်းသော ဆုံးမျဉ်းတန်းချို့များ ဖန်တီးခြင်း

ဒီ အကြောင်းပြီး အမေးအတွက် SVG ကိုယ်စားပြီး

<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" />

亲自试一试

代码解释：

• rx 和 ry 属性使矩形的角变圆