SVG <rect>

SVG 有一些预定义的形状元素,可被开发者使用和操作。

SVG 形状

SVG 有一些预定义的形状元素,可被开发者使用和操作:

  • ပုံသဏ္ဍာ <rect>
  • ပုံသဏ္ဍာ <circle>
  • အယ်လ်အယ်လ် <ellipse>
  • လမ်း <line>
  • ပုံသဏ္ဍာ <polyline>
  • ပုံသဏ္ဍာ <polygon>
  • လမ်း <path>

အခြေခံ အစုံး များ ကို သင်တော်မူပါလိမ့်မည်၊ ပုံသဏ္ဍာ အကိုးအချုပ် မှ စတင်ပါလိမ့်မည်:

<rect> အကိုးအချုပ်:

<rect> အကိုးအချုပ် အား ပုံသဏ္ဍာ ဖန်တီး နှင့် ပုံသဏ္ဍာ အမျိုးမျိုး ကို ဖန်တီး ရန် အသုံးပြုသည်:

အကျယ်အား သုံးစွဲ ကို အသုံးပြု ရန် အမှတ်ပုံ ကို အော်ကာသ ကာ ဒေါ်လုပ် ရန် အမှတ်ပုံ ကို "rect1.svg" အဖြစ် သို့ ကျပ်ထားပါ။ အခြေခံ စာမျက်နှာ ကို သို့ ရုပ်ရှင်သို့ ပြန်လည်သို့ သွင်းပါ:




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

လက်ရာ အချုပ်

  • rect အကိုးအချုပ် အား ပုံသဏ္ဍာ အကျယ်အဝန်း ဒေါ်လုပ်သည်:
  • style အကိုးအချုပ် အား အရောင်ဆိုင်ရာ အကိုးအချုပ် ဒေါ်လုပ်သည်:
  • CSS ရဲ့ fill အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် ဒေါ်လုပ်သည် (rgb အတိုင်း အရောင် အမည် သို့မဟုတ် လက်မှတ်အရောင်):
  • CSS ရဲ့ stroke-width အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် အကျယ်အဝန်း ဒေါ်လုပ်သည်:
  • CSS ရဲ့ stroke အကိုးအချုပ် အား ပုံသဏ္ဍာ အသီးသီး အရောင် ဒေါ်လုပ်သည်:

အကျယ်အဝန်း ကြည့်ရ:

အခြား အကိုးအချုပ် ပါဝင်သော အကျယ်အဝန်း တစ်ခု ကို ကြည့်ရမည်ဖြစ်သည်:




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

အချက်အလက် အပြောရာ:

  • x အကိုးအချုပ် အမှုန်း အား ပုံသဏ္ဍာ အရှေ့နံပါတ် အခြေအနေ ဒေါ်လုပ်သည် (ဥပမာ၊ x="0" ဖြစ်လာရင် ပုံသဏ္ဍာ သို့ ဘတ်သက်သို့ အရှည် 0px ဖြစ်သည်):
  • y အကိုးအချုပ် အမှုန်း အား ပုံသဏ္ဍာထက် အပေါ်နံပါတ် အခြေအနေ ဒေါ်လုပ်သည် (ဥပမာ၊ y="0" ဖြစ်လာရင် ပုံသဏ္ဍာ သို့ ဘတ်သက်သို့ အရှည် 0px ဖြစ်သည်):
  • CSS ရဲ့ fill-opacity အကိုးအချုပ် အထူးသံ အမှုန်း အတွက် ဒေါ်လုပ်သည် (ပြင်းအားနည်း နှင့် ကြား 0 - 1 အထိ ဖြစ်သည်):
  • CSS ရဲ့ stroke-opacity အကိုးအချုပ် အထူးသံ အမှုန်း အတွက် ဒေါ်လုပ်သည် (ပြင်းအားနည်း နှင့် ကြား 0 - 1 အထိ ဖြစ်သည်):

အကျဉ်းချုပ် ကို လေ့လာ

တစ်ခုလုံးသော အကိရိယာအတွက် အမှုန်းအား ဒေါ်လုပ်သည်:




<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

လက်ရာ အချုပ်

CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)

အကျဉ်းချုပ် ကို လေ့လာ

最后的例子,创建带有圆角的矩形:




<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

လက်ရာ အချုပ်

rx နှင့် ry အချုပ်အခြား ဖိအားဖြင့် ပိုင်းကွက်အဖြစ် ပေါ်ထွက်သွားသည်။

အကျဉ်းချုပ် ကို လေ့လာ