'SVG' Viewbox (HTML) ஐப் பயன்படுத்துவதற்கான வலை வடிவமைப்பு வழிகாட்டி
SVG வடிவங்களை உருவாக்கும் போது பொதுவாக பயன்படுத்தப்படும் ஒரு பண்புக்கூறாகும் Viewbox. ஆவணத்தை கேன்வாஸ் என்று நீங்கள் கருதினால், பார்வையாளர் பார்க்க விரும்பும் கேன்வாஸின் பகுதியாக காட்சி பெட்டி உள்ளது. முழு கணினி திரையின் பக்கத்தையும் உள்ளடக்கியிருந்தாலும், அந்த எண்ணிக்கை மொத்தத்தில் மூன்றில் ஒரு பகுதி மட்டுமே இருக்கும்.
அந்த மூன்றாம் பாகத்தில் பெர்சர் செய்ய பெர்சரை சொல்ல, காட்சிப்பெட்டி உங்களை அனுமதிக்கிறது. இது கூடுதல் வெள்ளை இடைவெளியை நீக்குகிறது. பார்வை பெட்டி ஒரு படத்தை விதைக்க ஒரு மெய்நிகர் அணுகுமுறை என்று.
இது இல்லாமல், உங்கள் கிராபிக் அதன் உண்மையான அளவு மூன்றில் ஒரு பங்கு தோன்றும்.
காட்சிப்பெட்டி மதிப்புகள்
ஒரு படத்தைச் செதுக்க, வெட்டுகளை உருவாக்க நீங்கள் படத்தில் புள்ளிகளை உருவாக்க வேண்டும். பார்வை பெட்டி பண்புகளைப் பயன்படுத்தும் போது இது உண்மை. காட்சிப்பெட்டிக்கான மதிப்பு அமைப்புகளில் பின்வருவன அடங்கும்:
- minx - தொடக்கத்தில் x ஒருங்கிணைப்பு
- மினி - தொடக்கத்தில் y ஒருங்கிணைப்பு
- காட்சி அகலத்தின் அகலம்
- உயரம் - காட்சி பெட்டி
காட்சி பெட்டி மதிப்புகளுக்கான தொடரியல்:
viewBox = "0 0 200 150"
காட்சி பெட்டி அகலமும் உயரமும் SVG ஆவணத்திற்காக நீங்கள் அமைத்த அகலமும் உயரமும் குழப்ப வேண்டாம். நீங்கள் ஒரு SVG கோப்பை உருவாக்கும் போது, நீங்கள் நிறுவும் முதல் மதிப்புகள் ஆவணம் அகலம் மற்றும் உயரம் ஆகும். ஆவணம் கேன்வாஸ் ஆகும். பார்வை பெட்டியில் முழு கேன்வாஸ் அல்லது அதன் ஒரு பகுதியை மூடிவிடலாம்.
இந்த காட்சி பெட்டி முழு பக்கத்தையும் உள்ளடக்கியது.
இந்த காட்சி பெட்டியில் மேல் வலது மூலையில் துவங்கும் பக்கத்தை உள்ளடக்கியது.
உங்கள் வடிவத்தில் உயரம் மற்றும் அகலமான பணிகள் உள்ளன.
இது 800 x 400 px ஐ மேல் வலது மூலையில் துவங்குகிறது மற்றும் பக்கத்தின் பாதி பகுதியை விரிவாக்கும் ஒரு பார்வைக் கொண்டிருக்கும் ஆவணமாகும். வடிவம் ஒரு பார்வை பெட்டியின் மேல் வலது மூலையில் தொடங்கி, 100 px இடது மற்றும் 50 px கீழே நகரும் ஒரு செவ்வக ஆகும்.
ஏன் காட்சி பெட்டி அமைக்க வேண்டும்?
SVG ஒரு வடிவத்தை வரையறதை விட அதிகமாக உள்ளது. இது நிழல் விளைவை மற்றொரு மேல் ஒரு உருவத்தை உருவாக்க முடியும். அது ஒரு திசையில் சாய்ந்து, அதனால் ஒரு வடிவத்தை மாற்றும். மேம்பட்ட வடிகட்டிகளுக்கு, பார்வை பெட்டி கற்பனையை நீங்கள் புரிந்து கொள்ள வேண்டும்.