درک سیستم های مختصات SVG و تبدیل ها (قسمت 3) – ایجاد درگاه های دید جدید

در هر نقطه از طراحی SVG، می‌توانید پنجره‌های جدید و سیستم‌های مختصات سفارشی را با تودرتو ایجاد کنید svgs یا استفاده از مواردی مانند symbol مورد، اتفاقا در این مقاله، چگونگی انجام این کار را بررسی خواهیم کرد و چگونه می تواند برای کنترل عناصر SVG و انعطاف پذیرتر کردن آنها (و/یا سیال) مفید باشد.

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

در طول این مقاله، فکر می کنم شما خوانده اید اول بخشی از این مجموعه در ویوپورت های SVG و viewBox و preserveAspectRatio صفات. برای دنبال کردن این مقاله نیازی نیست که مورد دوم در مورد تبدیل سیستم مختصات را مطالعه کرده باشید.

جاسازی عناصر svg

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

مثلاً فرض کنید که دارید و برخی مطالب داخل آن:

svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	
    svg>
    	
    svg>
svg>

اولین چیزی که در اینجا باید به آن توجه کرد این است که داخلی است عنصر نیازی به تعیین فضای نام ندارد xmlns روی آن زیرا قرار است فضای نامی مشابه فضای خارجی باشد فضای نام البته حتی بیرونی اگر در یک سند HTML5 جاسازی شود، نیازی به فضای نام نیست.

می توانید از یک SVG تو در تو برای گروه بندی عناصر با هم استفاده کنید و سپس آنها را در SVG والد قرار دهید. اکنون همچنین می‌توانید عناصر را با هم گروه‌بندی کنید و با استفاده از آن، آن‌ها را قرار دهید گروه – با قرار دادن عناصر در داخل یک گروه عنصر، شما می توانید آنها را روی بوم با استفاده از transform ویژگی با این حال، آن عنصر نسبت به استفاده مزایای خاصی دارد . استفاده از موقعیت یابی x و y مختصات در بیشتر موارد راحت تر از استفاده از تبدیل است. علاوه بر این، آن عنصر می پذیرد width و height صفاتی که عنصر ندارد. که گفت ممکن است همیشه ضروری یا ضروری نباشد زیرا یک viewport و سیستم مختصات جدیدی ایجاد می کند که ممکن است به آن نیاز نداشته باشید یا بخواهید.

با تنظیم عرض و ارتفاع به ، محتوای داخل آن را به محدوده های viewport که توسط آن تعریف شده است محدود می کنید x، y، width، و height صفات هر محتوایی که خارج از این محدودیت ها باشد، کلیپ می شود.

اگر مشخص نکنید x و y صفات، تهی فرض می شوند. اگر مشخص نکنید height و width صفات، از 100% عرض و ارتفاع SVG والد خود خواهد بود.

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

مقادیر درصد مشخص شده برای عناصر موجود در داخلی در مقابل آن محاسبه خواهد شد نه در مقابل خارجی svg. مقادیر درصد در قسمت داخلی خود نشان داده شده است در مقابل خارجی محاسبه خواهد شد svg. به عنوان مثال، موارد زیر باعث می شود SVG داخلی 400 واحد و مستطیل داخل آن 200 واحد باشد:

svg width="800" height="600">
	svg width="50%" ..>
		rect width="50%" ... />
	svg>
svg>

اگر عرض خارجی ترین روی 100% تنظیم شده است (به عنوان مثال، اگر در یک سند تعبیه شده باشد و می خواهید آن را جاری کنید)، سپس SVG داخلی در صورت لزوم گسترش و منقبض می شود تا عرضی معادل نصف عرض SVG خارجی حفظ شود – این بسیار قدرتمند است.

SVG های تودرتو به ویژه برای افزودن انعطاف پذیری و سیالیت به عناصر بوم SVG مفید هستند. ما این را با استفاده می دانیم viewBox ارزش ها و preserveAspectRatio، اکنون می توانیم SVG های پاسخگو ایجاد کنیم. بیرونی ترین ‘s with را می توان روی 100% تنظیم کرد تا مطمئن شوید که با بزرگ شدن یا کوچک شدن ظرف (یا صفحه) آن منبسط و منقبض می شود. سپس، با استفاده از viewBox ارزش ها و preserveAspectRatio، می‌توانیم مطمئن شویم که بوم SVG به تغییرات در ویوپورت (بیرونی‌ترین svg). من در مورد پاسخ SVG در اسلایدهای گفتگوی CSSConf خود نوشته ام. در اینجا می توانید تکنیک را بررسی کنید.

با این حال، هنگامی که ما به SVG به این شکل واکنش نشان می دهیم، کل بوم با همه عناصر ترسیم شده روی آن به طور همزمان واکنش نشان می دهند و تغییر می کنند. اما گاهی اوقات ممکن است بخواهید فقط یک عنصر را در نمودار داشته باشید تا انعطاف پذیر باشد در حالی که بقیه را در موقعیت و/یا اندازه «ثابت» نگه دارید. در اینجا درج شده است svgs می تواند مفید باشد.

ان svg عنصر می تواند سیستم مختصات خود را مستقل از والد خود داشته باشد و می تواند خود را داشته باشد viewBox و preserveAspectRatio ویژگی هایی که به شما امکان می دهد محتوا را هر طور که دوست دارید اندازه و در آن قرار دهید.

بنابراین برای اینکه یک عنصر را انعطاف پذیر کنیم، می توانیم آن را در آن بپیچیم عنصر و این را بدهید svg flexwidth به طوری که آن را با عرض خارجی ترین SVG تطبیق دهد، و سپس مشخص کنید preserveAspectRatio="none" بنابراین گرافیک داخل آن نیز با عرض ظرف کشیده و کوچک می شود. (توجه داشته باشید که svgs را می توان چندین سطح تو در تو قرار داد، اما برای ساده نگه داشتن چیزها، من در این مقاله فقط یک سطح را در عمق قرار می دهم.)

برای نشان دادن چگونگی تو در تو svgs می تواند مفید باشد، بیایید به چند نمونه نگاه کنیم.

یک مثال

فرض کنید SVG زیر را داریم:

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

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

توجه داشته باشید که در این مرحله باید با نحوه عملکرد SVG viewport، “viewBox” و “preserveAspectRatio” آشنا باشید.

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

برای به دست آوردن این اثر، بالای تخم مرغ باید با پیچیدن آن از بقیه جدا شود svg خود. این svg لفاف یک شناسه دریافت می کند upper-shell.

سپس ما مطمئن خواهیم شد که جدید svg#upper-shell دارای همان ارتفاع و عرض SVG بیرونی است. این را می توان با مشخص کردن به دست آورد width="100%" height="100%" در svg، یا با عدم تعیین ارتفاع و عرض. اگر هیچ عرض و ارتفاعی در SVG داخلی مشخص نشده باشد، به طور خودکار تا 100٪ عرض و ارتفاع SVG خارجی افزایش می یابد.

اگر هیچ عرض و ارتفاعی در SVG داخلی مشخص نشده باشد، به طور خودکار تا 100٪ عرض و ارتفاع SVG خارجی افزایش می یابد.

در نهایت، برای اطمینان از اینکه پوسته بالایی “بالا” یا در مرکز بالایی قرار گرفته است svg#upper-shell، از مناسب استفاده خواهیم کرد preserveAspectRatio مقداری که تضمین می‌کند که ViewBox در مرکز بالای نمای درگاه قرار دارد—مقدار است xMidYMin.

کد گرافیک SVG به صورت زیر می شود:

svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    svg viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        
        g id="chicken">
            
        g>
        
        path id="lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    svg>

    svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMin meet">
        
        path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    svg>
svg>

بخش‌های مرتبط با مقاله، مانند گرادیان مورد استفاده برای رنگ کردن پوسته‌های تخم‌مرغ و مسیرهایی که شکل‌ها را تشکیل می‌دهند، فقط برای اختصار در کد مثال حذف کردم.

در این مرحله به خاطر داشته باشید که viewBox روی تودرتو نشان داده شده است svg#upper-shell دارای همان ارزش خارجی ترین است svg (قبل از حذف). دلیل استفاده از همان viewBox ارزش به گونه ای است که SVG ظاهر اصلی خود را در صفحه نمایش های بزرگ حفظ می کند.

بنابراین کار به این صورت است: ما با یک SVG شروع می کنیم – در مورد ما، تصویر یک تخم مرغ ترک خورده با مرغی است که درون آن پنهان شده است.
سپس “لایه” دیگری ایجاد می کنیم و پوسته بالایی را به آن ارتقا می دهیم – این لایه با استفاده از تودرتو ایجاد می شود svg.
تو در تو svg ابعادی مشابه ابعاد خارجی دارد svg و همینطور viewBox.
در نهایت، ViewBox داخلی SVG بدون توجه به اندازه صفحه نمایش به بالای درگاه نمایش تنظیم می‌شود – این تضمین می‌کند که وقتی اندازه صفحه باریک است و SVG کشیده است، پوسته بالایی بالا می‌آید، بنابراین مرغ را «پشت» روی بوم نشان می‌دهد.

پس از کوچک شدن اندازه صفحه، SVG کشیده می شود و ViewBox حاوی پوشش بالایی با استفاده از نمای در بالای صفحه نمایش قرار می گیرد. preserveAspectratio="xMidYMin meet".

برای مشاهده زنده SVG روی دکمه زیر کلیک کنید. حتماً اندازه مرورگر خود را تغییر دهید تا سازگاری SVG را ببینید.

نمونه زنده را ببینید

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

اگر بخواهیم تمام تخم مرغ از مرغ خارج شود، می توانیم همیشه پوسته پایینی آن را داخل آن بپیچیم svg لایه خود مالک همان است viewBox، بیش از حد سپس، برای اطمینان از اینکه پوسته پایینی به سمت پایین حرکت می کند و به مرکز پایینی دریچه دید می چسبد، آن را با preserveAspectRatio="xMidYMax meet". کد به شکل زیر خواهد بود:

svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    svg id="chick" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        
        g id="chick">
            
        g>
    svg>

    svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        
        path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    svg>

    svg id="lower-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMax meet">
        
        path id="the-lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="..."/>
    svg>
svg>

هر یک از svg لایه ها/نمایش ها برابر با 100% عرض و ارتفاع بیرونی ترین است svg. بنابراین اساسا ما سه کلون داریم. هر لایه حاوی یک عنصر است – پوسته بالا، پوسته پایین یا مرغ. را viewBox برای سه لایه یکسان است، فقط با preserveAspectRatio متفاوت بودن

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

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

همچنین توجه داشته باشید که تو در تو svgلازم نیست که ارتفاع و عرض آن‌ها برابر با موارد موجود باشد svg; می توانید ارتفاع و عرض را مشخص کنید و محتوای آن را داشته باشید svg محدود شده و توسط مرزهای تعیین شده توسط آن ارتفاع و عرض کوتاه شود – همه چیز به چیزی بستگی دارد که شما در تلاش برای رسیدن به آن هستید.

با استفاده از SVG های تو در تو، عناصر صاف ایجاد کنید

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

به عنوان مثال، اگر می خواهید تنها یک عنصر در یک SVG مایع باشد، می توانید آن را در یک بپیچید svg، و استفاده کنید preserveAspectRatio="none" تا این عنصر گسترش یابد تا تمام عرض نما را همیشه پر کند و در عین حال نسبت ابعاد و موقعیت سایر عناصر را همانطور که در مثال قبلی انجام دادیم حفظ کنیم.

svg>
    
    svg viewBox=".." preserveAspectRatio="none">
        
    svg>
    svg viewBox=".." preserveAspectRatio="..">
        
    svg>
    
svg>

جیک آرچیبالد یک مورد استفاده ساده و کاربردی برای SVG های تودرتو ایجاد کرد که دقیقاً این کار را انجام می دهد: یک رابط کاربری ساده که حاوی عناصری است که در گوشه های بیرونی قرار گرفته اند. svg، نسبت ابعاد خود را حفظ می کنند و قسمت میانی رابط کاربری صاف و پاسخگو به تغییر است svg عرض با انقباض و انبساط با آن. شما می توانید نسخه ی نمایشی او را اینجا ببینید. حتماً کد موجود در ابزارهای توسعه را برای انتخاب و پیش نمایش موارد مختلف بررسی کنید viewboxeu و svgاستفاده می شود.

راه های دیگر برای ایجاد ویندوز جدید

svg عناصر تنها عناصری نیستند که پنجره های جدید را در SVG ایجاد می کنند. در بخش‌های بعدی، راه‌های دیگری برای ایجاد پنجره‌های جدید با استفاده از سایر عناصر SVG را بررسی خواهیم کرد.

یک نمای جدید با استفاده از “symbol” ایجاد کنید.

را symbol عنصر هر بار که توسط آن نمونه سازی می شود یک viewport جدید تعریف می کند use عنصر

الف symbol عنصر می تواند باشد used با مشخص کردن آن در xlink:href ویژگی از use مورد:

svg>
    symbol id="my-symbol" viewBox="0 0 300 200">
        
        
    symbol>
    use xlink:href="#my-symbol" x="?" y="?" width="?" height="?">
svg>

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

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

زمانی که symbol استفاده می شود، آن را عمیقا در درخت سایه تولید شده شبیه سازی می شود، با این تفاوت که symbol با یک جایگزین می شود svg. این تولید می کند svg همیشه مقادیر صریح برای ویژگی ها وجود خواهد داشت width و height. اگر صفات width و/یا height ارائه می شوند use عنصر سپس آن ویژگی ها به تولید شده منتقل می شود svg. اگر صفات width و/یا height تولید شده مشخص نشده اند svg عنصر از مقادیر 100% برای این ویژگی ها استفاده می کند.

زمانی که symbol استفاده می شود، آن را عمیقا در درخت سایه تولید شده شبیه سازی می شود، با این تفاوت که symbol با یک جایگزین می شود svg.

چون در نهایت به دست می آوریم svg در DOM و از این زمان svg آن را عملا در خارجی موجود است svg کجا use استفاده می شود، ما با تو در تو باقی می ماند svg وضعیتی که تفاوت چندانی با وضعیتی که در قسمت قبل در مورد آن صحبت کردیم – تو در تو نیست svg یک نمای جدید را تشکیل می دهد. را viewBox برای سرمایه گذاری شده svg است viewBox نشان داده شده در symbol عنصر ( symbol عنصر a را می پذیرد viewBox مقدار ویژگی برای اطلاعات بیشتر، به مقاله: ساختار، گروه بندی و ارجاع در SVG – The ، ، و عناصر).

بنابراین اکنون یک نمای جدید داریم که ابعاد و موقعیت آن را می توان در نمایه مشخص کرد use عنصر (x، y، width، height) و چه کسی viewBox مقدار را نیز می توان در آن مشخص کرد symbol عنصر محتوای symbol سپس رندر شده و در داخل آن viewport و viewBox قرار می گیرد.

و آخرین اما نه کم اهمیت ترین، symbol عنصر نیز a را می پذیرد preserveAspectratio مقدار ویژگی که به شما امکان می دهد موقعیت یابی کنید viewBox در داخل نمای جدید ایجاد شده توسط use. خیلی تمیز، درسته؟ شما می توانید تودرتوی جدید ایجاد شده را کنترل کنید svg همانطور که در بخش های قبلی انجام دادیم.

Dirk Weber همچنین یک نسخه نمایشی ایجاد کرد که از SVG های تودرتو و symbol عناصری برای تقلید از رفتار تصاویر حاشیه CSS. می توانید مقاله او را اینجا ببینید.

با ارجاع به یک تصویر SVG در “تصویر” یک نمای جدید ایجاد کنید.

را image عنصر نشان می دهد که محتویات یک فایل کامل باید در یک مستطیل مشخص در سیستم مختصات کاربر فعلی ارائه شود. را image می تواند به فایل های تصویر بیت مپ مانند PNG یا JPEG یا فایل هایی با نوع MIME “image/svg+xml” اشاره کند.

ان image عنصری که به یک فایل SVG ارجاع می دهد باعث ایجاد یک نمای جدید موقت می شود زیرا منبع مشخص شده طبق تعریف دارای svg عنصر

image xlink:href="myGraphic.svg" x="?" y="?" width="?" height="?" preserveAspectRatio="?" />

را عنصر بسیاری از ویژگی ها را می پذیرد، برخی از این ویژگی ها – موارد مربوط به این مقاله – هستند x و y ویژگی های موقعیت، width و height صفات و preserveAspectratio.

معمولاً یک فایل SVG حاوی روت است عنصر این عنصر ممکن است موقعیت و ابعاد مشخصی داشته باشد یا نداشته باشد، علاوه بر a viewBox و الف preserveAspectratio ارزش

زمانی که یک image عنصر به یک فایل تصویری SVG ارجاع می دهد x، y، width و height ویژگی های ریشه svg نادیده گرفته می شوند. مگر اینکه ارزش preserveAspectRatio در image عنصر با “Defer” شروع می شود preserveAspectRatio ویژگی عنصر والد در تصویر SVG ارجاع شده نیز نادیده گرفته می شود. در عوض، preserveAspectRatio ویژگی مرجع image عنصر تعیین می کند که چگونه محتوای تصویر SVG در پنجره نمایش قرار می گیرد.

ارزش از viewBox ویژگی برای استفاده در هنگام ارزیابی preserveAspectRatio ویژگی با محتوای ارجاع شده تعریف می شود. برای محتوایی که به وضوح ViewBox را مشخص می کند (به عنوان مثال یک فایل SVG با viewBox ویژگی خارجی ترین عنصر svg) این مقدار باید استفاده شود. برای اکثر محتوای بیت مپ (PNG، JPEG) محدوده تصویر (یعنی. image عنصر یک امر ضمنی دارد viewBox از “0 0 bitmap عرض، bitmap ارتفاع”). هنگامی که هیچ مقدار به راحتی در دسترس نیست (به عنوان مثال یک فایل SVG بدون viewBox ویژگی خارجی ترین عنصر svg) the preserveAspectRatio ویژگی نادیده گرفته می شود و فقط ترجمه به دلیل x & y از ویژگی های viewport برای نمایش محتوا استفاده می شود.

به عنوان مثال، اگر عنصر تصویر به PNG یا JPEG و preserveAspectRatio="xMinYMin meet"، سپس نسبت تصویر شطرنجی حفظ می شود، شطرنج تا حد امکان بزرگ می شود و در عین حال اطمینان حاصل می شود که کل شطرنجی در نمای دید قرار می گیرد، و بالا/چپ شطرنجی با بالا/چپ درگاه دید مطابق با ویژگی ها تراز خواهد شد. x، y، width و height در image عنصر
اگر ارزش از preserveAspectRatio “هیچ” بود، در این صورت نسبت ابعاد تصویر حفظ نمی شود. تصویر به گونه‌ای نصب می‌شود که گوشه بالا/چپ شطرنجی دقیقاً با مختصات تراز باشد (x، y) و گوشه پایین/راست شطرنجی دقیقاً با مختصات (x+width، y+height).

ایجاد نمای جدید با استفاده از «iframe».

ان iframe عنصری که به یک فایل SVG ارجاع می دهد، یک نمای جدید شبیه به وضعیت آن ایجاد می کند image عنصر توضیح داده شده در بالا ان iframe عنصر نیز می تواند داشته باشد x، y، width، و height ویژگی ها، علاوه بر ویژگی های خود preserveAspectratio.

با استفاده از “foreignObject” یک نمای جدید ایجاد کنید

الف foreignObject عنصر یک پنجره جدید برای نمایش محتوای موجود در عنصر ایجاد می کند.

را foreignObject تگ به شما امکان می دهد محتوای غیر SVG را به یک فایل SVG اضافه کنید. به طور کلی فرض بر این است که محتویات یک ForeignObject از یک فضای نام متفاوت است. به عنوان مثال، می توانید مقداری HTML را در وسط یک عنصر SVG رها کنید.

را foreignObject عنصر صفاتی را می پذیرد که از جمله آنها هستند x، y، height، و width، که برای قرار دادن شی و اندازه آن استفاده می شود، و محدودیت هایی را ایجاد می کند که برای ارائه محتوای مورد اشاره در داخل آن استفاده می شود.

حرف های زیادی برای گفتن وجود دارد foreignObject عنصری غیر از ایجاد یک نمای جدید برای محتویات آن. اگر علاقه مند هستید، می توانید ورودی MDN را بررسی کنید یا این مورد استفاده عملی را از آن بررسی کنید کریستین شفر در وبلاگ The Nitty Gritty.

تکمیل

ایجاد دیدگاه‌ها و سیستم‌های مختصات جدید – یا با تودرتو svgs یا هر عنصر دیگری که در بالا ذکر شد—به شما امکان می‌دهد بخش‌هایی از SVG را کنترل کنید که در غیر این صورت نمی‌توانید به همان روش کنترل کنید.

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

آیا نمونه های جالبی با استفاده از ویوپورت های تو در تو در SVG ایجاد کرده اید؟ آیا می توانید به مثال های خلاقانه تری فکر کنید؟

این مقاله مجموعه “درک سیستم های مختصات SVG و تبدیل ها” را به پایان می رساند. بعد، ما به انیمیشن ها و خیلی چیزهای دیگر می پردازیم! با ما همراه باشید و ممنون که خواندید!