SVG Viewport و ViewBox (برای مبتدیان کامل)

این آموزش سریع SVG viewport و viewBox را بررسی کنید. ما دقیقاً کدام ویوپورت و viewBox در SVG برای وب هستند.

SVG Viewport

اگر کلمه "viewport" را به معنای واقعی کلمه تجزیه کنید، به نقش آن در SVG اشاره خواهید کرد. این یک "پورت" ایجاد می کند که از طریق آن می توانید بخشی از یک SVG را "مشاهده" کنید. تصور کنید که این چیزی شبیه به یک دریچه روزنه ای است که از طریق آن می توانید جهان فراتر را ببینید.

مانند یک پنجره، اندازه درگاه دید تعیین می کند که چقدر می توانید ببینید. با این حال، اندازه هر چیزی را که ممکن است از طریق آن viewport قابل مشاهده باشد، مشخص نمی کند. آنچه در طرف دیگر است از نظر تئوری می تواند در هر اندازه باشد.

به عنوان مثال، شما ممکن است شکلی در گرافیک خود داشته باشید 100px توسط 100px. اما اگر نمای SVG را روی آن تنظیم کنید 50px توسط 50px، فقط بخشی از آن شکل را خواهید دید. اندازه ویوپورت با افزودن تنظیم می شود width و height صفات به svg عنصر، مانند:

در اولین SVG، کل را می بینیم 100px توسط 100px دایره. با این حال، در SVG دوم، زمانی که اندازه نمای خود را روی آن تنظیم می کنیم 50px توسط 50px ما فقط یک چهارم دایره را می بینیم.

SVG viewBox

را viewBox می توان آن را به اندازه دید در نظر گرفت اما با دو ویژگی اضافی: می تواند "پن" و می تواند "زوم" کند. با تکیه بر قیاس «نگاه کردن از طریق شیشه»، اگر نمای دید مانند یک پنجره باشد، viewBox مانند تلسکوپ است

پارامترهای viewBox

بیایید در مورد بزرگنمایی SVG صحبت کنیم. ما کنترل می کنیم viewBox با اضافه کردن آن به عنوان یک ویژگی به svg عنصر، با مقداری متشکل از چهار عدد با فاصله:

دو عدد اول موقعیت را مشخص می کنند viewBox، که ما به عنوان "پنینگ" فکر می کنیم. دو عدد آخر ابعاد آن را مشخص می کند viewBox، که ما آن را به عنوان "زوم" در نظر خواهیم گرفت.

SVG بزرگنمایی در ViewBox

ما با نگاه کردن به "زوم" شروع می کنیم، که می توانیم با دو مورد آخر انجام دهیم viewBox مولفه های: width و height. ما دو پارامتر اول را رها می کنیم 0 0 در حال حاضر

اگر آن دو پارامتر SVG viewBox آخر دارای ابعاد یکسانی با viewport باشند، هیچ بزرگنمایی یا کوچکنمایی وجود ندارد. این یعنی چیزی تغییر نمی کند. به عنوان مثال به SVG شماره 3 نگاه کنید:

اما اگر این دو عدد را بزرگتر از ابعاد نمای درت کنیم، عملاً بزرگنمایی خواهیم کرد. و اگر آنها را کوچکتر کنیم، بزرگنمایی می کنیم.

در SVG شماره 4 در مثال بالا ما مقدار را تنظیم کرده ایم viewBox width و height به 100، که دو برابر اندازه دید ما است. این «کوچک نمایی» می کند و محتوا را دو برابر نشان می دهد و در نتیجه کل دایره را نشان می دهد.

در SVG پنجم ما viewBox روی a تنظیم شده است width و height از 25، که نصف اندازه نمای ماست. این SVG viewBox بزرگ نمایی می کند و نیمی از محتوا را نشان می دهد. در مجموع، زوم SVG بسیار ساده است.

SVG Panning در ViewBox

دو مورد اول viewBox پارامترها به شما این امکان را می دهند که با تنظیم جایی که در گوشه سمت چپ بالای صفحه قرار دارد، "پان" کنید viewBox باید باشد. عدد اول موقعیت افقی را کنترل می کند و عدد دوم موقعیت عمودی را کنترل می کند.

• برای حرکت به سمت راست، عدد اول را افزایش دهید
• برای حرکت به سمت چپ، عدد اول را کاهش دهید
• برای پایین آوردن، عدد دوم را افزایش دهید
• برای حرکت به سمت بالا، عدد دوم را کاهش دهید

در این مثال به نحوه عملکرد این پانینگ نگاهی بیندازید. برای یادآوری، SVG شماره 3 دارای یک 50 توسط 50 ویوپورت، viewBox اضافه شده است، اما بدون بزرگنمایی SVG یا پاننگ. شماره 6 یکسان است، اما به سمت راست و پایین حرکت می کند:

ViewBox جابجایی و بزرگنمایی با هم

البته می توانید همزمان زوم و حرکت SVG را اعمال کنید. این کار را با استفاده از هر چهار پارامتر به طور همزمان انجام دهید، به عنوان مثال:

هنگام استفاده از ViewBox، Viewport خود را تنظیم کنید

هر زمان که از viewBox ویژگی، به یاد داشته باشید که ابعاد ویوپورت خود را نیز تنظیم کنید. اگر این کار را نکنید، آنها به طور پیش فرض روی 100٪ خواهند بود و احتمالاً یک گرافیک بزرگ خواهید داشت:

SVG Viewport و ViewBox، به ترتیب.

SVG viewBox و Viewport به طور خلاصه توضیح داده شده است

بیایید SVG viewBox و Viewport را در چند نقطه خلاصه کنیم:

• ویوپورت مانند پنجره ای است که برای دیدن محتوای یک SVG از آن نگاه می کنید.
• SVG viewBox شبیه درگاه دید SVG است، اما می توانید از آن برای "پن" و "زوم" مانند یک تلسکوپ نیز استفاده کنید.
• کنترل نمای از طریق width و height پارامترهای روی svg عنصر
• با افزودن ویژگی، viewBox را کنترل کنید viewBox به svg عنصر همچنین می توان از آن بر روی عناصر استفاده کرد symbol، marker، pattern و view.
• SVG viewBox مقدار ویژگی از چهار پارامتر جدا شده از فضا تشکیل شده است.
• دو SVG اول viewBox پارامترها "panning" و دو پارامتر آخر "zooming" را کنترل می کنند.
• پارامتر اول را به سمت راست "pan" افزایش دهید، آن را به "pan" سمت چپ کاهش دهید.
• پارامتر دوم را به "pan" به پایین افزایش دهید، آن را به "pan" up کاهش دهید.
• را بسازید viewBox ابعاد (دو پارامتر آخر) بزرگتر از نما برای "کوچک کردن" است. برای "بزرگنمایی"، آنها را کوچکتر کنید.

امیدوارم که به روشن شدن آب های گاه تار SVG کمک کند viewport و viewBox. ایجاد SVG مبارک!

درباره SVG و طراحی وب بیشتر بدانید

ما SVG viewBox و viewport، پارامترهای بزرگنمایی آن و موارد دیگر را توضیح داده ایم. اگر می خواهید به یادگیری در مورد SVG برای طراحی وب ادامه دهید، این منابع عالی هستند: