SVG <rect>
- ပြီးခဲ့သော အသစ် SVG ကို HTML တွင်
- နောက်အသစ် SVG ဆုံးချိန်
SVG 有一些预定义的形状元素,可被开发者使用和操作。
SVG 形状
SVG 有一些预定义的形状元素,可被开发者使用和操作:
- ပုံသဏ္ဍာ <rect>
- ပုံသဏ္ဍာ <circle>
- အယ်လ်အယ်လ် <ellipse>
- လမ်း <line>
- ပုံသဏ္ဍာ <polyline>
- ပုံသဏ္ဍာ <polygon>
- လမ်း <path>
အခြေခံ အစုံး များ ကို သင်တော်မူပါလိမ့်မည်၊ ပုံသဏ္ဍာ အကိုးအချုပ် မှ စတင်ပါလိမ့်မည်:
<rect> အကိုးအချုပ်:
<rect> အကိုးအချုပ် အား ပုံသဏ္ဍာ ဖန်တီး နှင့် ပုံသဏ္ဍာ အမျိုးမျိုး ကို ဖန်တီး ရန် အသုံးပြုသည်:
အကျယ်အား သုံးစွဲ ကို အသုံးပြု ရန် အမှတ်ပုံ ကို အော်ကာသ ကာ ဒေါ်လုပ် ရန် အမှတ်ပုံ ကို "rect1.svg" အဖြစ် သို့ ကျပ်ထားပါ။ အခြေခံ စာမျက်နှာ ကို သို့ ရုပ်ရှင်သို့ ပြန်လည်သို့ သွင်းပါ:
လက်ရာ အချုပ်
- rect အကိုးအချုပ် အား ပုံသဏ္ဍာ အကျယ်အဝန်း ဒေါ်လုပ်သည်:
- style အကိုးအချုပ် အား အရောင်ဆိုင်ရာ အကိုးအချုပ် ဒေါ်လုပ်သည်:
- CSS ရဲ့ fill အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် ဒေါ်လုပ်သည် (rgb အတိုင်း အရောင် အမည် သို့မဟုတ် လက်မှတ်အရောင်):
- CSS ရဲ့ stroke-width အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် အကျယ်အဝန်း ဒေါ်လုပ်သည်:
- CSS ရဲ့ stroke အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် ဒေါ်လုပ်သည်:
အခြား အကိုးအချုပ် ပါဝင်သော အကျယ်အဝန်း တစ်ခု ကို ကြည့်ရမည်ဖြစ်သည်:
အချက်အလက် အပြောရာ:
- x အကိုးအချုပ် အမှုန်း အား ပုံသဏ္ဍာ အရှေ့နံပါတ် အခြေအနေ ဒေါ်လုပ်သည် (ဥပမာ၊ x="0" ဖြစ်လာရင် ပုံသဏ္ဍာ သို့ ဘတ်သက်သို့ အရှည် 0px ဖြစ်သည်):
- y အကိုးအချုပ် အမှုန်း အား ပုံသဏ္ဍာထက် အပေါ်နံပါတ် အခြေအနေ ဒေါ်လုပ်သည် (ဥပမာ၊ y="0" ဖြစ်လာရင် ပုံသဏ္ဍာ သို့ ဘတ်သက်သို့ အရှည် 0px ဖြစ်သည်):
- CSS ရဲ့ fill-opacity အကိုးအချုပ် အထူးသံ အမှုန်း အတွက် ဒေါ်လုပ်သည် (ပြင်းအားနည်း နှင့် ကြား 0 - 1 အထိ ဖြစ်သည်):
- CSS ရဲ့ stroke-opacity အကိုးအချုပ် အထူးသံ အမှုန်း အတွက် ဒေါ်လုပ်သည် (ပြင်းအားနည်း နှင့် ကြား 0 - 1 အထိ ဖြစ်သည်):
တစ်ခုလုံးသော အကိရိယာအတွက် အမှုန်းအား ဒေါ်လုပ်သည်:
လက်ရာ အချုပ်
CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)
最后的例子,创建带有圆角的矩形:
လက်ရာ အချုပ်
rx နှင့် ry အချုပ်အခြား ဖိအားဖြင့် ပိုင်းကွက်အဖြစ် ပေါ်ထွက်သွားသည်။
- ပြီးခဲ့သော အသစ် SVG ကို HTML တွင်
- နောက်အသစ် SVG ဆုံးချိန်