'SVG' വ്യൂബോക്സ് (HTML) ഉപയോഗിക്കുന്നതിനുള്ള ഒരു വെബ് ഡിസൈൻ ഗൈഡ്
SVG രൂപങ്ങൾ സൃഷ്ടിക്കുമ്പോൾ സാധാരണയായി ഉപയോഗിക്കുന്ന ഒരു ആട്രിബ്യൂട്ടാണ് വ്യൂബോക്സ്. പ്രമാണം ഒരു ക്യാൻവാസ് ആയി നിങ്ങൾ കരുതുന്നെങ്കിൽ, കാഴ്ചക്കാരൻ കാണുന്നതിന് നിങ്ങൾ ആഗ്രഹിക്കുന്ന ക്യാൻവാസിന്റെ ഭാഗമാണ് കാഴ്ച ബോക്സ്. പേജ് മുഴുവൻ കമ്പ്യൂട്ടർ സ്ക്രീനിൽ ഉൾപ്പെടുമെങ്കിലും, മൊത്തം എണ്ണം മൂന്നിലൊന്ന് മാത്രമേ ഉള്ളൂ.
മൂന്നാം പേജിൽ സൂം ഇൻ ചെയ്യാൻ പാഴ്സർ പറയാൻ വ്യൂ ഇന്ബോക്സ് അനുവദിക്കുന്നു. അത് അധിക വൈറ്റ് സ്പേസ് ഇല്ലാതാക്കുന്നു. ഒരു ഇമേജ് കത്രിക്കുന്നതിനുള്ള ഒരു വിർച്വൽ സമീപനമായി കാഴ്ചാ പെട്ടി കരുതുക.
ഇത് കൂടാതെ, നിങ്ങളുടെ ഗ്രാഫിക് അതിൻറെ യഥാർത്ഥ വലുപ്പത്തിൻറെ മൂന്നിലൊന്ന് ദൃശ്യമാകും.
വ്യൂബോക്സ് മൂല്യങ്ങൾ
ഒരു ഇമേജ് കത്രിക്കുന്നതിന്, വെട്ടിക്കുറയ്ക്കുന്നതിന് ചിത്രത്തിൽ നിങ്ങൾ പോയിന്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട്. കാഴ്ച ബോക്സ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുമ്പോൾ ഇതു സത്യമാണ്. വ്യൂബോക്കിനുള്ള മൂല്യനിർണ്ണയ ക്രമീകരണങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:
- minx - ആരംഭിക്കുന്ന x കോർഡിനേറ്റ്
- മിനി: തുടക്കത്തിൽ y കോർഡിനേറ്റ് ചെയ്യുക
- വീതി - വ്യൂബോക്കിൻറെ വിത്ത്
- വ്യൂവുകളുടെ ഉയരം-ഉയരം
കാഴ്ച ബോക്സ് വിലകൾക്കുള്ള സിന്റാക്സ് ഇതാണ്:
viewBox = "0 0 200 150"
കാഴ്ച ബോക്സിലെ വീതിയും ഉയരവും എസ്വിജി പ്രമാണത്തിനായി നിങ്ങൾ സജ്ജമാക്കിയ വീതിയും ഉയരവും കൊണ്ട് ആശയക്കുഴപ്പമുണ്ടാക്കരുത്. നിങ്ങൾ ഒരു SVG ഫയൽ സൃഷ്ടിക്കുമ്പോൾ, നിങ്ങൾ സ്ഥാപിക്കുന്ന ആദ്യ മൂല്യങ്ങളിൽ ഒന്നാണ് പ്രമാണ വീതിയും ഉയരവും. പ്രമാണം ഒരു ക്യാൻവാസ് ആണ്. കാഴ്ച ബോക്സ് മുഴുവൻ ക്യാൻവാസ് അല്ലെങ്കിൽ അതിന്റെ ഒരു ഭാഗം ഉൾപ്പെടുത്താവുന്നതാണ്.
ഈ കാഴ്ച ബോക്സ് മുഴുവൻ പേജും കവർ ചെയ്യുന്നു.
ഈ വീക്ഷണ ബോക്സ് ഉപരിതല വലതു മൂലയിൽ ആരംഭിക്കുന്ന പകുതി പേജ് ഉൾക്കൊള്ളുന്നു.
നിങ്ങളുടെ ആകൃതി ഉയരവും വീതി അസൈൻമെന്റുകളും ഉണ്ട്.
800x400 px കവർ ചെയ്യാവുന്ന ഒരു രേഖയാണ് ഇത്. ഇത് മുകളിൽ വലതു വശത്തായി ആരംഭിക്കുന്ന ഒരു വ്യൂക്ബോക്സും പേജിന്റെ പകുതിയും വികസിപ്പിക്കുന്നു. ആ കാഴ്ച്ച രൂപം വലതുവശത്തെ കാഴ്ചാ ബോക്സിൽ ആരംഭിക്കുകയും ഇടത് വശത്തേക്ക് 100 px നീക്കുകയും 50 px താഴേയ്ക്ക് നീങ്ങുകയും ചെയ്യും.
ഒരു കാഴ്ചബോക്സ് സജ്ജമാക്കേണ്ടത് എന്തുകൊണ്ട്?
ഒരു ആകൃതി വരയ്ക്കുന്നതിനേക്കാൾ SVG വളരെ കൂടുതലാണ്. ഒരു നിഴൽ ഇഫക്റ്റിനു വേണ്ടി മറ്റൊന്നിൽ ഇത് ഒരു ചിത്രം സൃഷ്ടിക്കാൻ കഴിയും. അത് ഒരു ദിശയിൽ തെളിക്കുമെന്നതിനാൽ ഒരു ആകൃതി രൂപപ്പെടുത്താവുന്നതാണ്. വിപുലമായ ഫിൽട്ടറുകൾക്കായി, നിങ്ങൾ കാഴ്ച ബോക്സ് ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുകയും ഉപയോഗിക്കുകയും വേണം.