درک سیستم های مختصات SVG و تبدیل ها (قسمت 1) – Viewport، viewBox و SaveAspectRatio

عناصر SVG توسط یک الگوی جعبه CSS مانند عناصر HTML کنترل نمی شوند. این باعث می شود موقعیت و تبدیل این عناصر پیچیده تر شود و ممکن است – در نگاه اول – کمتر بصری به نظر برسد. با این حال، هنگامی که متوجه شدید که سیستم‌ها و تبدیل‌های مختصات SVG چگونه کار می‌کنند، دستکاری SVG بسیار آسان‌تر می‌شود و بسیار منطقی‌تر می‌شود. در این مقاله، ما به سه مورد از مهمترین ویژگی های SVG که بر سیستم های مختصات SVG حاکم هستند، نگاه می کنیم: viewport، viewBox، و preserveAspectRatio.

این اولین مقاله از سری سه مقاله است که موضوع سیستم های مختصات و تبدیلات در SVG را پوشش می دهد.

برای تجسم بیشتر مفاهیم و توضیحات موجود در مقاله، یک نسخه نمایشی تعاملی ایجاد کردم که به شما امکان می دهد با مقادیر viewBox و preserveAspectRatio صفات

نسخه ی نمایشی تعاملی را بررسی کنید.

نسخه ی نمایشی، مهره روی کیک است، بنابراین اگر قبل از انجام آن مقاله را بررسی کرده اید، حتما برای خواندن آن بازگردید!

بوم SVG

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

درگاه دید

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

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

اینکه آیا تمام یا بخشی از بوم SVG قابل مشاهده است به این بستگی دارد اندازه این بوم* و ارزش از preserveAspectRatio ویژگی. اکنون لازم نیست نگران آنها باشید. ما در مورد آنها با جزئیات بیشتر صحبت خواهیم کرد.

شما با استفاده از اندازه ویوپورت را مشخص می کنید width و height ویژگی های بیرونی ترین عنصر

svg width="800" height="600">
	
svg>

در SVG، مقادیر را می توان با یا بدون شناسه واحد مشخص کرد. گفته می شود که یک مقدار بدون واحد مشخص شده است در فضای کاربری استفاده کنید واحدهای مصرف کننده. اگر مقدار در واحدهای کاربر مشخص شده باشد، آنگاه مقدار معادل همان تعداد واحد “px” در نظر گرفته می شود. این بدان معنی است که ویوپورت در مثال بالا به صورت نمای 800 پیکسل در 600 پیکسل نمایش داده می شود.

همچنین می توانید مقادیر را با استفاده از واحدها تنظیم کنید. شناسه های واحد طول پشتیبانی شده در SVG عبارتند از: em، ex، px، pt، pc، cm، mm، in، و درصدها

هنگامی که عرض و ارتفاع خارجی ترین عنصر SVG تنظیم شد، مرورگر یک حرف اولیه ایجاد می کند سیستم مختصات viewport و اولیه سیستم مختصات کاربر.

سیستم مختصات اولیه

اصل سیستم مختصات viewport یک سیستم مختصات است که در نمای دید ایجاد شده است، با مبدأ در گوشه سمت چپ بالای نمای در نقطه (0، 0)، محور x مثبت به سمت راست، محور مثبت y به پایین، و یک واحد در سیستم مختصات اصلی برابر با یک “پیکسل” در نمای دید است. این سیستم مختصات مشابه سیستم مختصاتی است که روی یک عنصر HTML با الگوی جعبه CSS تنظیم شده است.

اصل سیستم مختصات کاربر سیستم مختصاتی است که روی بوم SVG تنظیم شده است. این سیستم مختصات در ابتدا شبیه به سیستم مختصات درگاه دید است – مبدأ آن در گوشه سمت چپ بالای نمای درگاه است، با محور x مثبت به سمت راست و محور y مثبت به سمت پایین. با کمک viewBox ویژگی، سیستم مختصات کاربر اولیه – همچنین به عنوان شناخته شده است سیستم مختصات فعلی، یا فضای کاربری استفاده شده– می توان آن را طوری تغییر داد که دیگر با سیستم مختصات viewport یکسان نباشد. در بخش بعدی در مورد اصلاح آن صحبت خواهیم کرد.

فعلاً a را مشخص نمی کنیم viewBox مقدار ویژگی سیستم مختصات سفارشی بوم SVG مشابه درگاه دید است.

در تصویر زیر “خط‌کش” سیستم مختصات view خاکستری و مربوط به سیستم مختصات کاربر است ( viewBox) آبی است. از آنجایی که هر دو در این نقطه یکسان هستند، دو سیستم مختصات همپوشانی دارند.

طوطی در SVG فوق دارای یک جعبه مرزی است که 200 واحد (در این مورد 200 پیکسل) عرض و 300 واحد ارتفاع دارد. طوطی بر اساس سیستم مختصات اولیه روی بوم کشیده شده است.

یک فضای کاربری جدید (یعنی یک سیستم مختصات فعلی جدید) نیز می تواند با اشاره ایجاد شود تحولات با کمک transform ویژگی یک عنصر ظرف یا عنصر گرافیکی. در قسمت دوم این مقاله در مورد تحولات صحبت خواهیم کرد و سپس در قسمت سوم و پایانی با جزئیات بیشتر صحبت خواهیم کرد.

را viewBox

دوست دارم بهش فکر کنم viewBox به عنوان سیستم مختصات “واقعی”. هنوز هم هست در سیستم مختصاتی که برای ترسیم گرافیک های SVG روی بوم استفاده می شود. این سیستم مختصات می‌تواند کوچک‌تر یا بزرگ‌تر از Viewport باشد و می‌تواند به طور کامل یا جزئی در داخل viewport نیز قابل مشاهده باشد.

در بخش قبل، این سیستم مختصات – سیستم مختصات کاربر – با سیستم مختصات viewport یکسان بود. دلیل این امر این است که ما چیز دیگری را مشخص نکرده ایم. بنابراین، به نظر می رسد که تمام موقعیت یابی و ترسیم نسبت به سیستم مختصات viewport انجام شده است. زیرا زمانی که یک سیستم مختصات view ایجاد کردیم (با استفاده از width و height، مرورگر یک سیستم مختصات کاربر پیش فرض ایجاد کرده است که با آن یکسان است.

شما با استفاده از سیستم مختصات سفارشی خود را تعریف می کنید viewBox ویژگی اگر سیستم مختصات سفارشی انتخابی شما دارای نسبت ابعادی (نسبت ارتفاع به عرض) مشابه با سیستم مختصات درگاه نمایش باشد، تا پر شدن درگاه نمایش کشیده می شود (در یک دقیقه در مورد نمونه ها صحبت خواهیم کرد). با این حال، اگر سیستم مختصات سفارشی شما نسبت یکسانی ندارد، می توانید از آن استفاده کنید preserveAspectRatio ویژگی برای تعیین اینکه آیا کل سیستم در داخل viewport قابل مشاهده خواهد بود یا خیر، و همچنین می توانید از آن برای تعیین نحوه قرار دادن آن در داخل viewport استفاده کنید. در قسمت بعدی به جزئیات و نمونه های زیادی از این مورد خواهیم پرداخت. در این بخش به مثال هایی می پردازیم که در آن نسبت های viewBox مطابق با viewport است – در این مثال ها، preserveAspectRatio بدون تاثیر

قبل از اینکه وارد مثال ها شویم، نحو را بررسی می کنیم viewBox.

را viewBox نحو

را viewBox attribute چهار پارامتر را به عنوان مقدار می گیرد: ، ، width و height.

viewBox = min-x> min-y> width> height>

را و مقادیر گوشه سمت چپ بالای پنجره دید را مشخص می کنند، a width و height عرض و ارتفاع این ViewBox را مشخص می کند. در اینجا توجه داشته باشید که عرض و ارتفاع ViewBox نباید با عرض و ارتفاع تنظیم شده روی والد یکسان باشد عنصر یک مقدار منفی برای یا نامعتبر است مقدار صفر رندر عنصر را غیرفعال می کند.

توجه داشته باشید که عرض ویوپورت را نیز می توان در CSS روی هر مقداری تنظیم کرد. به عنوان مثال تنظیم width: 100% نمای SVG را در یک سند سیال می کند. ارزش هر چه باشد viewBox، سپس با عرض محاسبه شده عنصر SVG خارجی مطابقت داده می شود.

نمونه راه اندازی viewBox به این صورت خواهد بود:

svg width="800" height="600" viewbox="0 0 800 600">
	
svg>

اگر در مورد آن خوانده اید viewBox قبلاً ممکن است با تعاریفی برخورد کرده باشید که می‌گویند می‌توانید استفاده کنید viewBox ویژگی برای تبدیل گرافیک SVG با مقیاس یا ترجمه آن. این درست است. من جلوتر می روم و می گویم حتی می توانید فرهنگ با استفاده از گرافیک SVG viewBox.

بهترین راه برای پیدا کردن viewBox و تمایز آن از ویوپورت با رندر کردن آن است. پس بیایید با چند مثال شروع کنیم. ما با مثال‌هایی شروع می‌کنیم که در آن‌ها نسبت تصویر با نسبت تصویر یک ویوپورت یکسان است، بنابراین نیازی به بررسی نخواهیم بود. preserveAspectRatio بیشتر

viewBox با نسبت تصویر برابر با نسبت تصویر درگاه دید

با یک مثال ساده شروع می کنیم. را viewbox در این مثال، اندازه آن نصف نمای پورت خواهد بود. ما در این یکی مبدأ ویوپورت را تغییر نمی دهیم، بنابراین هر دو و صفر خواهد شد. عرض و ارتفاع ویوپورت نصف عرض و ارتفاع درگاه دید خواهد بود. این بدان معناست که نسبت تصویر را حفظ می کنیم.

svg width="800" height="600" viewbox="0 0 400 300">
	
svg>

پس چه کار می کند؟ viewbox="0 0 400 300" آیا کارم درست است؟

• این یک منطقه خاص از بوم را از نقطه بالا سمت چپ در (0، 0) تا یک نقطه در (400،300) تعریف می کند.
• سپس گرافیک SVG وجود دارد قطع کردن به این منطقه
• منطقه است مقیاس شده (در یک افکت زوم مانند) برای پر کردن کل نمای.
• سیستم مختصات کاربر به سیستم مختصات viewport تبدیل می شود، بنابراین در این مورد یک واحد کاربر برابر با دو واحد نمایش است.

تصویر زیر نتیجه اعمال نمای بالا را نشان می دهد بوم در مثال ما واحدهای خاکستری نشان دهنده سیستم مختصات دید و سیستم مختصات آبی نشان دهنده سیستم مختصات کاربر است که توسط تنظیم شده است viewBox.

هر چیزی که روی بوم SVG ترسیم می کنید، نسبت به سیستم مختصات کاربر جدید ترسیم می شود.

من دوست دارم بوم SVG را با a پیش نمایش کنم viewBox مانند نقشه های گوگل. می توانید روی یک منطقه یا منطقه خاص در Google Maps زوم کنید. این ناحیه تنها ناحیه قابل مشاهده بزرگنمایی شده در نمای مرورگر خواهد بود. با این حال، می‌دانید که بقیه نقشه هنوز وجود دارد، اما قابل مشاهده نیست، زیرا فراتر از محدوده‌های ویوپورت گسترش می‌یابد – برش داده شده است.

حالا بیایید سعی کنیم تغییر کنیم و ارزش ها ما هر دو را تنظیم می کنیم 100. آنها می توانند هر تعداد که شما بخواهید باشند. نسبت تصویر نیز با نسبت تصویر درگاه نمایش یکسان خواهد بود.

svg width="800" height="600" viewbox="100 100 200 150">
	
svg>

اثر اجرا viewBox="100 100 200 150" همچنین یک افکت برش مانند نمونه قبلی است. گرافیک برش داده می‌شود و برای پر کردن کل ناحیه دید کوچک‌تر می‌شود.

مجدداً، سیستم مختصات کاربر به سیستم مختصات viewport نگاشت می‌شود – 200 واحد کاربر به 800 واحد نمای نگاشت می‌شود، بنابراین هر واحد کاربر برابر با چهار واحد دید است. این منجر به یک افکت زوم می شود مانند آنچه در تصویر بالا می بینید.

همچنین در این مرحله توجه داشته باشید که تعیین مقادیر غیر صفر برای و مقادیر یک اثر تبدیل بر روی نمودار دارند. به طور خاص، گویی بوم SVG 100 واحد به بالا و 100 واحد به سمت چپ منتقل شده است (transform="translate(-100 -100)").

در واقع، همانطور که در مشخصات ذکر شده است، اثر از viewBox ویژگی این است که عامل کاربر به طور خودکار ماتریس تبدیل مناسب را برای ترسیم مستطیل مشخص شده در فضای کاربر به مرزهای یک منطقه مشخص (اغلب درگاه دید) ارائه می دهد..

این فقط یک روش فانتزی برای گفتن چیزی است که قبلاً ذکر کردیم: گرافیک ها بریده می شوند و سپس برش می شوند. مقیاس شده متناسب با نمای دید سپس مشخصات یک یادداشت اضافه می کند: در برخی موارد، عامل کاربر نیاز به ارائه a تبدیل تبدیل علاوه بر تحول در مقیاس بزرگ. به عنوان مثال، در بیرونی ترین عنصر svg، تبدیل ترجمه مورد نیاز خواهد بود اگر viewBox ویژگی ها مقادیر غیر صفر را برای آن مشخص می کند یا .)

برای نشان دادن حتی بهتر تبدیل ترجمه، بیایید سعی کنیم مقادیر منفی (-100) را به کار ببریم و . سپس اثر ترجمه مشابه خواهد بود transform="translate(100 100)"; به این معنی که گرافیک از پایین و درست پس از برش و مقیاس بندی ترجمه می شود. اگر بخواهیم مثال ماقبل آخر را با اندازه برش 400 در 300 مرور کنیم و سپس منفی جدید را اضافه کنیم. و مقادیر، این کد جدید ما خواهد بود:

svg width="800" height="600" viewbox="-100 -100 400 300">
	
svg>

نتیجه اعمال موارد فوق viewBox تبدیل به نمودار در تصویر زیر نشان داده شده است:

توجه داشته باشید که بر خلاف transform ویژگی، تبدیل خودکاری است که به دلیل a ایجاد می شود viewBox تاثیر نمی گذارد x، y، width و height ویژگی های عنصر با viewBox ویژگی بنابراین در مثال بالا که نشان می دهد svg عنصری که دارای صفات است width، height و viewBox، در width و height ویژگی ها مقادیری را در سیستم مختصات نشان می دهند که قبلا وجود داشته است viewBox تبدیل اعمال می شود. شما می توانید این را در مثال های بالا ببینید زیرا سیستم مختصات اصلی (خاکستری) نما حتی پس از استفاده نیز بدون تأثیر باقی می ماند. viewBox ویژگی از .

از سوی دیگر، به عنوان transform ویژگی، یک سیستم مختصات جدید برای سایر ویژگی ها و برای عناصر ارثی ایجاد می کند. همچنین می‌توانید ببینید که در مثال‌های بالا، از آنجایی که سیستم مختصات کاربر ایجاد شده جدید است – به عنوان سیستم مختصات کاربر اصلی باقی نمی‌ماند، که قبلاً با سیستم مختصات viewport یکسان بود. viewBox استفاده شد. و همه نوادگان در موقعیت و اندازه قرار خواهد گرفت جدید سیستم مختصات کاربر به جای سیستم اصلی.

آخرین ما viewBox مثال مشابه نمونه های قبلی است، اما به جای بریدن بوم، این کار را انجام می دهیم گسترش داخل viewport و ببینید که چگونه بر روی نمودار تاثیر می گذارد. ما یک نمای با عرض و ارتفاع بزرگتر از درگاه دید را تنظیم می کنیم و در عین حال نسبت تصویر را حفظ می کنیم. در بخش بعدی نسبت‌های مختلف را بررسی خواهیم کرد.

در این مثال، اندازه ویوپورت را 1.5 برابر ویوپورت می کنیم.

svg width="800" height="600" viewbox="0 0 1200 900">
	
svg>

آنچه اکنون اتفاق می افتد این است که سیستم مختصات کاربر به 1200×900 مقیاس می شود. سپس به سیستم مختصات view نگاشت می شود تا هر 1 واحد در سیستم مختصات کاربر برابر باشد viewport-width / viewBox-width به صورت افقی و viewport-height / viewBox-height واحدها به صورت عمودی در سیستم مختصات viewport. این بدان معناست که در این حالت، هر واحد x در سیستم مختصات کاربر برابر با 0.66 واحد x در سیستم مختصات viewport است و هر واحد y کاربر به 0.66 y-واحد از viewport نگاشت می‌شود.

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

تاکنون، تمام نمونه‌های ما با نسبت ابعاد ارتفاع به عرض درگاه نمایش مطابقت دارند. اما چه اتفاقی می افتد اگر ارتفاع و عرض مشخص شده در viewBox نسبت ابعاد متفاوتی نسبت به نمای دید دارید؟ برای مثال، فرض کنید ابعاد ویوپورت را 1000×500 قرار داده ایم. نسبت ارتفاع به عرض دیگر مانند درگاه دید نیست. نتیجه استفاده viewBox = "0 0 1000 500" در مثال ما به این صورت است:

سیستم مختصات کاربر، و در نتیجه نمودار، در داخل viewport قرار می گیرد تا:

• کل نما در داخل نما قرار می گیرد.
• نسبت تصویر حفظ می شود. ویو باکس بود نه کشیده شده تا ناحیه دید را پوشش دهد.
• ویوپورت هم به صورت عمودی و هم به صورت افقی در داخل نما در مرکز قرار دارد.

این رفتار پیش فرض است. چه چیزی این رفتار را کنترل می کند؟ و اگر بخواهیم ویوپورت را در داخل ویوپورت تغییر مکان دهیم چه؟ اینجاست که preserveAspectRatio صفت وارد می شود.

را preserveAspectRatio صفت

را preserveAspectRatio این ویژگی برای ایجاد مقیاس یکنواخت به منظور حفظ نسبت های طرح استفاده می شود.

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

اعوجاج همچنین به وضوح قابل مشاهده است (و البته ناخواسته) هنگام استفاده از مقدار Viewbox 0 0 200 300، که کوچکتر از ابعاد ویوپورت خواهد بود. من این مقدار را به‌طور خاص انتخاب کردم تا دید درگاه با اندازه جعبه مرزی طوطی مطابقت داشته باشد. اگر مرورگر گرافیک را برای پر کردن کل ویوپورت بکشد، به شکل زیر خواهد بود:

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

را preserveAspectRatio نحو

نحو رسمی برای preserveAspectRatio است:

preserveAspectRatio = defer? align> meetOrSlice>?

می توان از آن برای هر عنصری که یک نمای جدید ایجاد می کند استفاده کرد (در قسمت های بعدی سری به این موارد خواهیم پرداخت).

را defer آرگومان اختیاری است و فقط هنگام اعمال استفاده می شود preserveAspectRatio به آن . هنگام استفاده بر روی هر عنصر دیگری نادیده گرفته می شود. از آنجایی که فراتر از محدوده این مقاله، از آن می گذریم defer گزینه در حال حاضر

را align پارامتر نشان می‌دهد که آیا باید مقیاس‌گذاری یکنواخت را اجباری کرد و اگر چنین است، روش هم‌ترازی را برای استفاده در مورد نسبت ابعاد viewBox با نسبت تصویر مطابقت ندارد

اگر align مقدار تنظیم شده است noneبه عنوان مثال:

preserveAspectRatio = "none"

گرافیک به گونه‌ای مقیاس‌بندی می‌شود که بدون حفظ نسبت تصویر، متناسب با نمای دید باشد، دقیقاً همانطور که در دو نمونه آخر دیدیم.

تمام مقادیر دیگر از preserveAspectRatio با حفظ نسبت ابعاد درگاه دید، مقیاس یکنواخت را اعمال کنید و نحوه تراز کردن درگاه دید را در داخل درگاه نمایش مشخص کنید. ما مقادیر را وارد خواهیم کرد align به زودی

آخرین استدلال، meetOrSlice همچنین اختیاری است و پیش فرض است meet. این استدلال مشخص می کند که آیا کل viewBox باید در داخل viewport قابل مشاهده باشد. در صورت ارائه، از آن جدا می شود align پارامتر با یک یا چند فاصله به عنوان مثال:

preserveAspectRatio = "xMinYMin slice"

این مقادیر ممکن است در ابتدا خارجی به نظر برسند. برای درک راحت‌تر و آشنایی بیشتر آن‌ها، می‌توانید به آن فکر کنید meetOrSlice ارزش به عنوان مشابه background-size ارزش ها contain و cover; آنها تقریباً یکسان کار می کنند. meet مشابه است contain، و slice مشابه است cover. در اینجا تعاریف و معنای هر مقدار آمده است:

مطابقت (مقدار پیش فرض)

با حفظ دو معیار زیر، نمودار را تا حد امکان مقیاس دهید:

• نسبت ها حفظ می شود
• کل viewBox در ویوپورت قابل مشاهده است

در این حالت، اگر نسبت های گرافیکی با viewport مطابقت نداشته باشد، بخشی از viewport فراتر از محدوده viewBox (یعنی منطقه ای که در آن viewBox ترسیم خواهد شد کوچکتر از viewport). (آخرین مثال را از بخش viewBox مشاهده کنید.) در این مورد، کران های “viewBox” در داخل viewport قرار می گیرند، بنابراین کران ها *تقارن می کنند*.

این مقدار مشابه است background-size: contain. تصویر پس‌زمینه تا جایی که ممکن است کوچک‌تر می‌شود، در حالی که نسبت ابعاد آن حفظ می‌شود و اطمینان حاصل می‌شود که کاملاً در منطقه ترسیم پس‌زمینه قرار می‌گیرد. اگر نسبت تصویر پس‌زمینه با عنصری که روی آن اعمال می‌شود یکسان نباشد، قسمت‌هایی از ناحیه طراحی پس‌زمینه توسط تصویر پس‌زمینه پوشانده نمی‌شود.

قطعه

نمودار را طوری مقیاس کنید که viewBox در حالی که نسبت تصویر آن را حفظ می کند، کل ناحیه دید را پوشش می دهد. را viewBox مقیاس بندی شده است به اندازه کافی برای پوشاندن ناحیه دید (در هر دو بعد)، اما برای دستیابی به این هدف، بیشتر از اندازه لازم نیست. به عبارت دیگر، آن را به کوچکترین اندازه، بنابراین عرض و ارتفاع از مقیاس viewBox می تواند نمای پورت را به طور کامل پوشش دهد.

در این صورت، اگر نسبت از viewBox با نمای دید مطابقت ندارد، برخی از viewBox فراتر از محدوده دید (یعنی ناحیه ای که در آن viewBox ترسیم بزرگتر از نمای دید است). این باعث می شود بخشی از “viewBox” *قطع* شود.

می توانید آن را شبیه به آن در نظر بگیرید background-size: cover. در مورد یک تصویر پس‌زمینه، تصویر با حفظ نسبت ابعاد ذاتی آن (در صورت وجود)، به کوچک‌ترین اندازه بزرگ می‌شود تا هم عرض و هم ارتفاع آن بتواند منطقه موقعیت‌یابی پس‌زمینه را کاملاً پوشش دهد.

بنابراین meetOrSlice برای تعیین اینکه آیا یا نه استفاده می شود viewBox به طور کامل در داخل درگاه نمایش قرار می گیرد، یا اگر نیاز باشد که به اندازه ای که لازم است برای پوشاندن کل ویوپورت بزرگ شود، حتی اگر این بدان معناست که بخشی از نمای پورت “قطع” خواهد شد.

مثلا اگر اعمال کنیم viewBox اندازه 200×300 و با استفاده از هر دو meet و slice ارزش ها، حفظ align مقداری که به طور پیش فرض توسط مرورگر تنظیم شده است، نتیجه برای هر مقدار به شکل زیر خواهد بود:

را align پارامتر یکی از 9 مقدار یا را می گیرد none ارزش هر ارزشی غیر از none برای مقیاس یکنواخت تصویر با حفظ نسبت ابعاد آن استفاده می شود. و نیز برای تراز کردن در viewBox داخل درگاه دید

را align ارزش ها مشابه نحوه کار می کنند background-position وقتی با مقادیر درصد استفاده می شود کار می کند. می توانید فکر کنید viewBox به عنوان تصویر پس زمینه نحوه موقعیت یابی با align متفاوت است background-position این است که به جای قرار دادن یک نقطه دید خاص بر روی نقطه دید مربوطه، آن را تراز می کند “محورهای” خاص viewBox با “محورهای” مربوطه از viewport.

برای درک معنای هر یک از align مقادیر، ابتدا هر یک از “محورها” را معرفی می کنیم.

به یاد داشته باشید و ارزش های viewBox? ما از هر یک از اینها برای تعریف محور “min-x” و محور “min-y” استفاده خواهیم کرد. viewBox. ما همچنین دو محور “max-x” و “max-y” را تعریف خواهیم کرد که در موقعیت قرار می گیرند. + و + به ترتیب. و در آخر، دو محور “mid x” و “mid y” را تعریف می کنیم که در موقعیت قرار دارند. + (/2) و + (/2)به ترتیب.

آیا این موضوع باعث سردرگمی بیشتر شد؟ اگر چنین است، به تصویر زیر نگاه کنید تا ببینید هر یک از این محورها چه چیزی را نشان می دهند. در تصویر، هر دو و به صورت پیش فرض تنظیم شده اند 0 ارزش ها را viewBox تنظیم شده است viewBox = "0 0 300 300".

خطوط خاکستری چین خورده در تصویر بالا نشان دهنده نقطه وسط محورهای x و y نمای درگاه هستند. ما از اینها برای تراز کردن mid-x و mid-y محورهای استفاده می‌کنیم viewBox برای برخی از ارزش ها برای viewport، مقدار min-x برابر با 0 است، مقدار min-y نیز 0 است، مقدار max-x برابر است با عرض viewBoxمقدار max-y برابر با ارتفاع آن است و mid-x و mid-y به ترتیب مقادیر متوسط عرض و ارتفاع را نشان می دهند.

مقادیر تراز عبارتند از:

وجود ندارد

پوسته پوسته شدن یکنواخت را مجبور نکنید. در صورت لزوم، محتوای گرافیکی عنصر داده شده را به طور ناموزون (بدون حفظ نسبت تصویر) تغییر دهید تا کادر مرزی عنصر دقیقاً با مستطیل درگاه دید مطابقت داشته باشد.

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

(توجه: اگر align هیچ، پس اختیاری است meetOrSlice ارزش نادیده گرفته می شود.)

xMinYMin

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x از عنصر viewBox با کوچکترین مقدار X در نمای.

تراز کردن min-y از عنصر viewBox با کوچکترین مقدار Y در ویوپورت.

آن را شبیه به آن در نظر بگیرید background-position: 0% 0%;.

xMinYMid

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x از عنصر viewBox با کوچکترین مقدار X در نمای.

مقدار وسط Y عنصر را تراز کنید viewBox با نقطه میانی مقدار Y از viewport.

آن را شبیه به آن در نظر بگیرید background-position: 0% 50%;.

xMinYMax

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x از عنصر viewBox با کوچکترین مقدار X در نمای.

تراز کردن min-y+height از عنصر viewBox با حداکثر مقدار Y در پنجره دید.

آن را شبیه به آن در نظر بگیرید background-position: 0% 100%;.

xMidYMin

اجباری پوسته پوسته شدن یکنواخت.

مقدار X نقطه میانی عنصر را تراز کنید viewBox با نقطه میانی X مقدار دید.

تراز کردن min-y از عنصر viewBox با کوچکترین مقدار Y در ویوپورت.

آن را شبیه به آن در نظر بگیرید background-position: 50% 0%;.

xMidYMid (مقدار پیش فرض)

اجباری پوسته پوسته شدن یکنواخت.

مقدار X نقطه میانی عنصر را تراز کنید viewBox با نقطه میانی X مقدار دید.

مقدار وسط Y عنصر را تراز کنید viewBox با نقطه میانی مقدار Y از viewport.

آن را شبیه به آن در نظر بگیرید background-position: 50% 50%;.

xMidYMax

اجباری پوسته پوسته شدن یکنواخت.

مقدار X نقطه میانی عنصر را تراز کنید viewBox با نقطه میانی X مقدار دید.

تراز کردن min-y+height از عنصر viewBox با حداکثر مقدار Y در پنجره دید.

آن را شبیه به آن در نظر بگیرید background-position: 50% 100%;.

xMaxYMin

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x+width از عنصر viewBox با حداکثر مقدار X درگاه دید.

تراز کردن min-y از عنصر viewBox با کوچکترین مقدار Y در ویوپورت.

آن را شبیه به آن در نظر بگیرید background-position: 100% 0%;.

xMaxYMid

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x+width از عنصر viewBox با حداکثر مقدار X درگاه دید.

مقدار وسط Y عنصر را تراز کنید viewBox با نقطه میانی مقدار Y از viewport.

آن را شبیه به آن در نظر بگیرید background-position: 100% 50%;.

xMaxYMax

اجباری پوسته پوسته شدن یکنواخت.

تراز کردن min-x+width از عنصر viewBox با حداکثر مقدار X درگاه دید.

تراز کردن min-y+height از عنصر viewBox با حداکثر مقدار Y در پنجره دید.

آن را شبیه به آن در نظر بگیرید background-position: 100% 100%;.

بنابراین، با استفاده از align و meetOrSlice ارزش های preserveAspectRatio ویژگی، شما می توانید تعیین کنید که مقیاس بندی شود یا خیر viewBox به طور یکنواخت، نحوه تراز کردن آن در داخل ویوپورت و اینکه آیا باید به طور کامل در داخل ویوپورت قابل مشاهده باشد یا خیر.

گاهی و بسته به اندازه viewBox، برخی از مقادیر ممکن است نتایج مشابهی داشته باشند. به عنوان مثال در viewBox="0 0 200 300" به عنوان مثال از قبل، برخی از ترازها با استفاده از متفاوت یکسان هستند align ارزش ها ارزش از meetOrSlice تنظیم شده است meet در این مورد، بنابراین کل viewBox در ویوپورت موجود است.

اگر مجبور بودیم تغییر کنیم meetOrSlice ارزش به slice، برای مقادیر مختلف نتایج متفاوتی بدست می آوریم. توجه کنید که چگونه viewBox امتداد می یابد تا کل نمای را پوشش دهد. محور x به گونه ای کشیده می شود که 200 واحد، 800 واحد دید را پوشش دهد. برای اینکه این اتفاق بیفتد و برای حفظ نسبت تصویر درگاه دید، محور y در پایین “بریده” می شود، اما می توانید آن را تا زیر ارتفاع درگاه دید نمایش دهید.

البته متفاوت viewBox مقادیر نیز با 200×300 که در اینجا استفاده می کنیم متفاوت به نظر می رسند. برای اختصار، من به مثال‌های بیشتری نمی‌روم و به شما اجازه می‌دهم با یک نسخه نمایشی تعاملی که برای کمک به شما در تجسم بهتر نحوه ایجاد آن، بازی کنید. viewBox و متفاوت preserveAspectRatio وقتی از مقادیر مختلف استفاده می شود، مقادیر با هم کار می کنند. شما می توانید نسخه ی نمایشی تعاملی را با مراجعه به لینک در بخش بعدی بررسی کنید.

اما قبل از اینکه به آن برسیم، فقط می‌خواهم توجه کنم که مقادیر mid-x، mid-y، max-x و max-y تغییر اگر مقادیر از و تغییر دهید. شما می توانید با نسخه نمایشی تعاملی بازی کنید و این مقادیر را تغییر دهید تا ببینید که چگونه محورها و در نتیجه تراز viewBox بر این اساس تغییر کند.

تصویر زیر تاثیر استفاده را نشان می دهد viewBox = "100 0 200 300" در موقعیت محورهای تراز. ما از همان مثال قبلی استفاده می کنیم، اما به جای داشتن مقدار روی صفر تنظیم شده است، ما آن را روی 100 قرار می دهیم. شما می توانید آنها را روی هر مقدار عددی که می خواهید تنظیم کنید. توجه کنید که چگونه محورهای min-x، mid-x و max-x تغییر می کنند. را preserveAspectRatio مورد استفاده شده در اینجا پیش فرض است xMidYMid meet، که به این معنی است که محورهای میانگین* با محورهای میانگین درگاه دید هم تراز هستند.

نسخه ی نمایشی تعاملی

بهترین راه برای درک نحوه ی viewport، viewBox، و متفاوت است preserveAspectRatio ارزش ها با هم کار می کنند و با هم تعامل می کنند، با تجسم آنها است.

برای این منظور، من یک دمو تعاملی ساده ایجاد کردم که به شما امکان می دهد مقادیر این ویژگی ها را تغییر دهید و نتیجه مقادیر جدید را به صورت زنده مشاهده کنید.

نسخه ی نمایشی تعاملی را بررسی کنید.

امیدواریم این مقاله برای درک نمای SVG برای شما مفید بوده باشد. viewBox، و preserveAspectRatio مفاهیم اگر می خواهید در مورد سیستم های مختصات SVG مانند سیستم های مختصات تودرتو، ایجاد موارد جدید و تبدیل در SVG اطلاعات بیشتری کسب کنید، منتظر قسمت های باقی مانده از این مجموعه باشید. می‌توانید مشترک RSS شوید (لینک زیر) یا من را در توییتر دنبال کنید تا به‌روز باشید. خیلی ممنون که خواندید!

تصویر طوطی SVG استفاده شده از Freepik.com رایگان است.

اگر این مقاله را دوست داشتید، ممکن است به موارد زیر نیز علاقه مند شوید: