'' SVG '' Viewbox (HTML) ကိုအသုံးပြုခြင်းမှတစ်ဦးက Web Design လမ်းညွှန်
Viewbox ဖန်တီးသောအခါအသုံးအများဆုံးအနေနဲ့ attribute ကဖြစ်ပါတယ် SVG ပုံစံမျိုးစုံ။ သင်တစ်ဦးကင်းဗတ်အဖြစ်စာရွက်စာတမ်းစဉ်းစားလျှင်, မြင်ကွင်းကို box ကိုသင်ကြည့်ရှုသူတွေ့မြင်လိုသောပတ္တူ၏အစိတ်အပိုင်းတစ်ခုဖြစ်ပါတယ်။ စာမကျြနှာတစျခုလုံးကိုကွန်ပျူတာမျက်နှာပြင်ကိုဖုံးလွှမ်းစေခြင်းငှါသော်လည်း, ထိုကိန်းဂဏန်းကိုသာမြေတပြင်လုံး၏သုံးပုံတစ်ပုံအတွက်တည်ရှိလိမ့်မည်။
Viewbox သင်တတိယအပေါ်ချဲ့ဖို့ parser ကိုပြောပြရန်ခွင့်ပြုပါတယ်။ ဒါဟာအပိုက white space ရှင်းလင်းစေပါတယ်။ ပုံတစ်ပုံကိုဖြတ်တောက်ရန်ကို virtual ချဉ်းကပ်မှုအဖြစ်ရှုမြင် box ရဲ့စဉ်းစားပါ။
ကမရှိရင်, သင့်ဂရပ်ဖစ်င်း၏အမှန်တကယ်အရွယ်အစားတတိယပေါ်လာပါလိမ့်မယ်။
Viewbox တန်ဖိုးများ
ပုံတစ်ပုံကိုဖြတ်တောက်ရန်, သင်ဖြတ်တောက်မှုလုပ်ပုံပေါ်အချက်များကိုဖန်တီးရမည်ဖြစ်သည်။ မြင်ကွင်းကို box ကို attribute ကိုသုံးတဲ့အခါတူညီသောမှန်သည်။ viewbox များအတွက်တန်ဖိုး setting များကိုပါဝင်သည်:
- ကိုသြဒိနိတ် x ကိုဖွအစပိုင်း minx
- Mini ဖွ y ကိုသြဒိနိတ်စတင်
- အဆိုပါ viewbox ၏အကျယ် -width
- အဆိုပါ viewbox ၏အမြင့် -height
အမြင် box ကိုတန်ဖိုးများများအတွက် syntax ဖြစ်ပါသည်:
viewBox = "0 င် 0 င် 200 150"
သင်မဘို့ရာခန့်ရဲ့ width နဲ့ height အတူမြင်ကွင်းကို box ရဲ့ width နဲ့ height ရှုပ်ထွေးမနေပါနဲ့ SVG စာရွက်စာတမ်း။ သင်တစ်ဦး SVG ဖိုင်ဖန်တီးတဲ့အခါ, သငျသညျတည်ထောင်ရန်ပထမဦးဆုံးတန်ဖိုးများကိုတစ်ဦးစာရွက်စာတမ်း width နဲ့ height ဖြစ်ပါတယ်။ စာရွက်စာတမ်းတစ်ပတ္တူဖြစ်ပါတယ်။ အဆိုပါမြင်ကွင်းကိုသေတ္တာတစ်ခုလုံးပတ္တူဒါမှမဟုတ့်သောအဘို့ကိုအဖုံးကိုပေးနိုင်သည်။
ဒီအမြင်သေတ္တာတစ်ခုလုံးကိုစာမျက်နှာကိုဖုံးလွှမ်း။
ဒီအမြင်အကွက်တွင်အထက်ညာဖက်ထောင်အတွက်ဝက်စာမျက်နှာစတင်ဖုံးလွှမ်း။
သင့်ရဲ့ပုံသဏ္ဍာန်ကိုလည်းအမြင့်နှင့်အကျယ်တာဝန်တွေရှိပါတယ်။
ဒါဟာအထက်ညာဖက်ထောင်အတွက်စတင်သည်နှင့်စာမျက်နှာ၏ထက်ဝက်ချဲ့ထွင်တဲ့ viewbox နှင့်အတူ 800 x 400 px ထိဖုံးလွှမ်းတဲ့စာရွက်စာတမ်းဖြစ်ပါတယ်။ ပုံသဏ္ဍာန်မြင်ကွင်းကို box ရဲ့ညာဘက်အပေါ်ထောင့်ကစတင်ခဲ့သည်နှင့်လက်ဝဲဘက်နှင့် 50 px ထိဆင်းဖို့က 100 px လှုံ့ဆျောပေးတဲ့စတုဂံပါပဲ။
အဘယ်ကြောင့်တစ်ဦး Viewbox သတ်မှတ်မည်လား?
SVG ့ပုံသဏ္ဍာန်ဆွဲထက်အများကြီးပိုပါဘူး။ ဒါဟာအရိပ်အကျိုးသက်ရောက်မှုများအတွက်အခြားထိပ်ပေါ်တဦးတည်းပုံဖန်တီးနိုင်ပါတယ်။ ဒါကြောင့်တဦးတည်းဦးတည် tilts သို့မှသာဒါဟာပုံသဏ္ဍာန်အဖြစ်ပြောင်းလဲနိုင်ပါတယ်။ အဆိုပါအဆင့်မြင့် filter များအဘို့, သင်အမြင် box ကို attribute ကိုနားလည်ပြီးသုံးစွဲဖို့လိုအပ်ပါလိမ့်မယ်။