SVG <rect>

SVG ပုံစံများ

SVG တွင် ဆော့ဖ်ဝဲရေးသားသူများ အသုံးပြုနိုင်သည့် ကြိုတင်သတ်မှတ်ထားသော ပုံသဏ္ဍာန်အစိတ်အပိုင်းအချို့ ရှိသည်-

အောက်ပါအခန်းများသည် rect element မှအစပြု၍ element တစ်ခုစီကိုရှင်းပြပါမည်။

ထောင့်မှန်စတုဂံတစ်ခုဖန်တီးရန်နှင့် ထောင့်မှန်စတုဂံပုံသဏ္ဍာန်၏ ကွဲပြားမှုများကို ဖန်တီးရန်အတွက် <rect> ဒြပ်စင်ကို အသုံးပြုသည်-

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

<rect> element ၏ width နှင့် height attribute များသည် အမြင့်နှင့် rectangle ၏ width ကို သတ်မှတ်သည်။
စတုဂံအတွက် CSS ဂုဏ်သတ္တိများကို သတ်မှတ်ရန် စတိုင် attribute ကို အသုံးပြုသည်။
CSS ဖြည့်စွက်ပိုင်ဆိုင်မှုသည် ထောင့်မှန်စတုဂံ၏ ဖြည့်စွက်အရောင်ကို သတ်မှတ်သည်။
CSS stroke-width ပိုင်ဆိုင်မှုသည် ထောင့်မှန်စတုဂံ၏ အကျယ်ကို သတ်မှတ်သည်။
CSS stroke ပိုင်ဆိုင်မှုသည် ထောင့်မှန်စတုဂံ၏ အရောင်ကို သတ်မှတ်သည်။

အရည်အချင်းအသစ်အချို့ပါရှိသော အခြားဥပမာကို ကြည့်ကြပါစို့။

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

x ရည်ညွှန်းချက်သည် ထောင့်မှန်စတုဂံ၏ ဘယ်ဘက်အနေအထားကို သတ်မှတ်သည် (ဥပမာ x="50" သည် ဘယ်ဘက်အနားသတ်မှ စတုဂံကို 50 px ထားသည်)
y ရည်ညွှန်းချက်သည် ထောင့်မှန်စတုဂံ၏ ထိပ်တန်းအနေအထားကို သတ်မှတ်သည် (ဥပမာ y="20" သည် စတုဂံကို ထိပ်အနားသတ်မှ 20 px ထားသည်)
CSS ဖြည့်စွက်-ပွင့်လင်းမြင်သာမှု ပိုင်ဆိုင်မှုသည် ဖြည့်စွက်အရောင်၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်သည် (တရားဝင်အကွာအဝေး- 0 မှ 1)
CSS stroke-opacity ပိုင်ဆိုင်မှုသည် လေဖြတ်ခြင်းအရောင်၏ ပွင့်လင်းမြင်သာမှုကို သတ်မှတ်သည် (တရားဝင်အကွာအဝေး- 0 မှ 1)

ဒြပ်စင်တစ်ခုလုံးအတွက် အလင်းပိတ်ခြင်းကို သတ်မှတ်ပါ-

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်

CSS ပွင့်လင်းမြင်သာမှုပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခုလုံးအတွက် ပွင့်လင်းမြင်သာမှုတန်ဖိုးကို သတ်မှတ်သည် (တရားဝင်အကွာအဝေး- 0 မှ 1)

နောက်ဆုံးဥပမာ၊ လုံးဝန်းသောထောင့်များဖြင့် ထောင့်မှန်စတုဂံတစ်ခုကို ဖန်တီးပါ။

ဤသည်မှာ SVG ကုဒ်ဖြစ်သည်

ကုဒ်၏ ရှင်းလင်းချက်