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

عناصر SVG را می توان با مقیاس بندی، ترجمه، تاب برداشتن و چرخش تبدیل کرد – درست مانند عناصر HTML که می توانند با استفاده از تبدیل های CSS تبدیل شوند. با این حال، برخی از تفاوت های اجتناب ناپذیر در مورد سیستم های مختصات مورد استفاده و تحت تاثیر این تبدیل ها وجود دارد. در این مقاله به بررسی SVG خواهیم پرداخت transform ویژگی و ویژگی CSS، نحوه استفاده از آن و چیزهایی که باید در مورد تبدیل سیستم مختصات SVG بدانید را پوشش می دهد.

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

در این قسمت، فرض می‌کنم که اولی را خوانده‌اید، بنابراین اگر مطالعه نکرده‌اید، قبل از ادامه خواندن این مقاله، مطمئن شوید که خوانده‌اید.

را transform مقادیر صفت

را transform ویژگی برای تعیین یک یا چند تبدیل عنصر استفاده می شود. این طول می کشد به عنوان یک مقدار که به عنوان لیستی از تعاریف تبدیل که به ترتیب ارائه شده اعمال می شوند، تعریف می شود. تعاریف تبدیل فردی با فاصله و/یا کاما از هم جدا می شوند. نمونه ای از اعمال تبدیل به یک عنصر ممکن است به شکل زیر باشد:

تبدیل های ممکن SVG عبارتند از: چرخش، پوسته پوسته شدن، ترجمه، و تحریف. توابع تبدیل مورد استفاده در transform ویژگی مشابه نحوه عملکرد توابع تبدیل CSS است transform ملک به جز اینکه استدلال های مختلفی را می پذیرند.

توجه داشته باشید که سینتکس تابع تعریف شده در زیر فقط در کار می کند transform ویژگی برای اطلاعات در مورد نحو مورد استفاده در خصوصیات تبدیل CSS به بخش Transform SVG with CSS مراجعه کنید.

ماتریس

شما می توانید یک یا چند تبدیل را با استفاده از یک عنصر SVG اعمال کنید matrix() تابع نحو برای تبدیل ماتریس به صورت زیر است:

matrix(a> b> c> d> e> f>)

اعلان بالا یک تبدیل را در قالب یک ماتریس تبدیل شش مقدار تعریف می کند. matrix(a,b,c,d,e,f) معادل اعمال تبدیل است ماتریس [a b c d e f].

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

ترجمه

برای ترجمه یک عنصر SVG، می توانید استفاده کنید translate() تابع نحو تابع translate به صورت زیر است:

translate(tx> [ty>])

را translate() تابع یک یا دو مقدار می گیرد که به ترتیب مقادیر ترجمه افقی و عمودی را مشخص می کنند. tx نشان دهنده مقدار ترجمه محور x است. ty مقدار ترجمه محور y را نشان می دهد.

را ty مقدار اختیاری است. و در صورت حذف به صورت پیش فرض صفر می شود. را tx و ty مقادیر را می توان با فاصله یا کاما از هم جدا کرد و هیچ واحدی را در داخل تابع نمی پذیرد – آنها به طور پیش فرض واحدهای سیستم مختصات کاربر فعلی هستند.

مثال زیر یک عنصر را با 100 واحد کاربر در سمت راست و 300 واحد کاربر در پایین ترجمه می‌کند:

circle cx="0" cy="0" r="100" transform="translate(100 300)" />

مثال بالا همچنان معتبر است اگر تبدیل با استفاده از translate(100, 300) جایی که مقادیر با کاما از هم جدا می شوند.

مقیاس بندی

شما می توانید اندازه یک عنصر SVG را با بزرگ کردن یا کوچک کردن آن با استفاده از آن تغییر دهید scale() تحول عملکردی نحو برای تبدیل مقیاس:

scale(sx> [sy>])

را scale() تابع یک یا دو مقدار را می پذیرد که به ترتیب مقادیر مقیاس افقی و عمودی را مشخص می کنند. sx نشان دهنده مقدار مقیاس بندی محور x است که برای کشش یا کوچک کردن عنصر به صورت افقی استفاده می شود. sy مقدار مقیاس بندی محور y را نشان می دهد که برای کشش یا کوچک کردن عنصر به صورت عمودی استفاده می شود.

را sy مقدار اختیاری است. و در صورت حذف برابر فرض می شود sx. را sx و sy مقادیر می توانند با فاصله یا کاما از هم جدا شوند و اعداد بدون واحد هستند.

مثال زیر اندازه یک عنصر را با دو برابر کردن اندازه اصلی آن دو برابر می کند:

rect width="150" height="100" transform="scale(2)" x="0" y="0" />

شکل زیر یک عنصر را به صورت افقی تا 2 عرض اصلی آن کشیده و آن را به صورت عمودی تا نصف ارتفاع اصلی آن کوچک می کند:

rect width="150" height="100" transform="scale(2 0.5)" x="0" y="0" />

مثال بالا همچنان معتبر است اگر تبدیل با استفاده از scale(2, .5) جایی که مقادیر با کاما از هم جدا می شوند.

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

تحریف

یک عنصر SVG نیز می تواند تحریف شود. برای تاب برداشتن آن، می توانید از یک یا هر دو تابع تبدیل تاب استفاده کنید: skewX و skewY.

skewX(skew-angle>)
skewY(skew-angle>)

را skewX تابع یک تبدیل مایل را در امتداد محور x تعریف می کند. و در skewY تابع یک تبدیل اریب در امتداد محور y تعریف می کند.

زاویه شیب نشان داده شده a است بدون واحد زاویه، که به طور پیش فرض درجه است.

توجه داشته باشید که تاب برداشتن یک عنصر ممکن است باعث شود که عنصر در قسمت دید قرار گیرد. بیشتر در این مورد در بخش بعدی.

چرخش

شما می توانید یک عنصر SVG را با استفاده از rotate() تابع نحو تابع عبارت است از:

rotate(rotate-angle> [cx> cy>])

را rotate() تابع چرخش را با rotate-angle درجه در مورد یک نقطه داده شده برخلاف تبدیل‌های چرخشی در CSS، نمی‌توانید واحد زاویه‌ای غیر از درجه را مشخص کنید. مقدار زاویه مشخص شده است بدون واحدو مقداری را بر حسب درجه به طور پیش فرض تنظیم می کند.

اختیاری cx و cy ارزش ها نشان دهنده بدون واحد مختصات نقطه ای که به عنوان مرکز چرخش استفاده می شود. اگر cx و cy ارائه نشده است، چرخش تقریبا است مبدا سیستم مختصات کاربر فعلی. (اگر مطمئن نیستید که سیستم مختصات کاربر چیست، قسمت 1 را ببینید.)

تعیین مرکز چرخش در داخل rotate() تابع مانند یک راه میانبر برای راه اندازی است transform: rotate() و transform-origin در CSS از آنجایی که مرکز پیش‌فرض چرخش در SVG گوشه سمت چپ بالای سیستم مختصات کاربر فعلی در حال استفاده است، و از آنجایی که ممکن است به شما اجازه ایجاد افکت چرخش مورد نظرتان را ندهد، احتمالاً متوجه خواهید شد که مرکز جدیدی را در داخل آن مشخص می‌کنید. rotate(). اگر ابعاد و موقعیت عنصر خود را بر روی بوم SVG می دانید، می توانید به راحتی مرکز آن را به عنوان مرکز چرخش مشخص کنید.

مثال زیر گروهی از عناصر را حول یک مرکز چرخش مشخص در موقعیت (50، 50) در سیستم مختصات کاربر فعلی می‌چرخاند:

g id="parrot" transform="rotate(45 50 50)" x="0" y="0">
	
g>

با این حال، اگر می خواهید یک عنصر به دور مرکز خود بچرخد، احتمالاً ترجیح می دهید مرکز را به عنوان مشخص کنید 50% 50% همانطور که در CSS انجام می دهید. اما متاسفانه من این کار را در داخل rotate() تابع امکان پذیر نیست – باید از مختصات مطلق استفاده کنید. با این حال، شما می تواند این کار را با استفاده از CSS انجام دهید transform-origin ویژگی در رابطه با CSS transform دارایی بیشتر در مورد آن در ادامه مقاله.

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

اکنون که همه ویژگی‌های تبدیل SVG ممکن را پوشش داده‌ایم، به بخش بصری و تأثیر اعمال هر تبدیل به یک عنصر SVG می‌پردازیم. این مهمترین جنبه تبدیل SVG است. و آنها را “تغییر سیستم مختصات” و نه فقط “تغییر عناصر” به دلیلی می نامند.

در مشخصات، transform ویژگی به عنوان یکی از دو ویژگی تعریف می شود که ایجاد فضای کاربری جدید (سیستم مختصات فعلی) روی عنصری که به آن اعمال می شود – the viewBox دومین ویژگی از دو ویژگی است که یک فضای کاربری جدید ایجاد می کند. پس این دقیقا به چه معناست؟

را transform ویژگی یک فضای کاربری جدید (سیستم مختصات فعلی) روی عنصری که به آن اعمال می شود ایجاد می کند.

این رفتار شبیه رفتار تبدیل‌های CSS اعمال شده بر روی یک عنصر HTML است – سیستم مختصات عنصر HTML تغییر شکل می‌دهد، و این معمولاً زمانی که تبدیل‌های زنجیره‌ای را انجام می‌دهید آشکارتر است (ما بعداً به آن خواهیم پرداخت). اگر چه در بسیاری از جنبه ها مشابه هستند، تبدیل های HTML و SVG تفاوت هایی با هم دارند.

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

وقتی درخواست می کنید transform به یک عنصر SVG، آن عنصر یک “کپی” از سیستم مختصات کاربر فعلی در حال استفاده را دریافت می کند. شما می توانید این را به سادگی ایجاد یک “لایه” جدید برای عنصر تبدیل شده در نظر بگیرید، جایی که لایه جدید کپی خود را از سیستم مختصات کاربر فعلی دارد ( viewBox).

سپس، سیستم مختصات فعلی جدید عنصر توسط توابع تبدیل مشخص شده در داخل تبدیل می شود transform ویژگی، که منجر به تبدیل خود عنصر می شود. گویی عناصر در سیستم مختصات تبدیل شده روی بوم کشیده شده اند.

برای درک نحوه اعمال تبدیل SVG، اجازه دهید با بخش بصری شروع کنیم. تصویر زیر بوم SVG را نشان می دهد که ما با آن کار خواهیم کرد.

طوطی و سگ عناصر هستند (گروه ) که تبدیل خواهیم کرد.

svg width="800" height="800" viewBox="0 0 800 600">
	g id="parrot">
		
	g>
	g id="dog">
		
	g>
svg>

سیستم مختصات خاکستری سیستم مختصات اولیه بوم است که توسط viewBox. برای سادگی، من سیستم مختصات اصلی را تغییر نمی دهم – من از آن استفاده می کنم viewBox که همان اندازه ویوپورت است که در کد بالا می بینید.

وقتی درخواست می کنید transform به یک عنصر SVG، آن عنصر یک “کپی” از سیستم مختصات کاربر فعلی در حال استفاده را دریافت می کند.

هنگامی که بوم و فضای کاربری اولیه خود را ایجاد کردیم، شروع به تبدیل عناصر می کنیم. بیایید با حرکت دادن طوطی 150 واحد به راست و 200 واحد به پایین شروع کنیم.

طوطی البته از چندین مسیر و شکل ساخته شده است. برای درخواست کافی است transform ویژگی گروهی که این اشکال را می پیچند ; این به نوبه خود تبدیل را به کل مجموعه اشکال و مسیرها اعمال می کند و طوطی به عنوان یک عنصر کامل ترجمه می شود. برای اطلاعات بیشتر به مقاله ساختار و گروه بندی SVG مراجعه کنید.

svg width="800" height="800" viewBox="0 0 800 600">
	g id="parrot" transform="translate(150 200)">
		
	g>
	
svg>

تصویر زیر نتیجه ترجمه طوطی را با استفاده از ترجمه فوق نشان می دهد. نسخه نیمه شفاف طوطی موقعیت اصلی را قبل از اعمال تبدیل نشان می دهد.

تبدیل ترجمه در SVG زمانی که بر روی یک عنصر HTML اعمال می شود به همان سادگی در CSS است. قبلاً اشاره کردیم که کاربرد transform ویژگی یک عنصر یک سیستم مختصات کاربر فعلی جدید را بر روی آن ایجاد می کند. تصویر زیر “کپی” از سیستم مختصات اصلی را نشان می دهد که بر روی عنصر طوطی هنگام تبدیل آن تنظیم شده است. توجه کنید که چگونه سیستم مختصات فعلی طوطی ترجمه می شود.

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

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

اگر بخواهیم سگ را در گوشه سمت راست پایین بوم تغییر شکل دهیم، این امر آشکارتر است. فرض کنید می خواهیم سگ را 50 واحد به سمت راست و سپس 50 واحد به سمت پایین حرکت دهیم. در اینجا شکل ظاهری سگ، موقعیت اولیه و سیستم مختصات فعلی جدید (که با سگ نیز ترجمه می شود) آمده است. توجه کنید که چگونه منشاء سیستم مختصات فعلی جدید سگ در گوشه سمت چپ بالای جعبه مرزی سگ قرار ندارد. همچنین توجه کنید که سگ و سیستم مختصات جدیدش چگونه به یک “لایه” جدید روی بوم منتقل شده اند.

حالا بیایید چیز دیگری را امتحان کنیم. به جای ترجمه طوطی، بیایید آن را مقیاس بندی کنیم. اندازه طوطی را دو برابر می کنیم:

svg width="800" height="800" viewBox="0 0 800 600">
	g id="parrot" transform="scale(2)">
		
	g>
	
svg>

نتیجه مقیاس بندی یک عنصر SVG با مقیاس بندی یک عنصر HTML متفاوت است. موقعیت عنصر SVG مقیاس شده در هنگام مقیاس بندی در نمای دید تغییر می کند. تصویر زیر نتیجه دو برابر شدن سایز طوطی را نشان می دهد. به موقعیت و اندازه اولیه و همچنین اندازه و موقعیت نهایی توجه کنید.

چیزی که از تصویر بالا می توانیم متوجه شویم این است که نه تنها اندازه (عرض و ارتفاع) طوطی دو برابر شده است، بلکه مختصات (x و y) نیز در ضریب مقیاس (که در اینجا دو است) ضرب می شود.

دلیل به دست آوردن این نتیجه چیزی است که قبلاً به آن اشاره کردیم: سیستم مختصات فعلی عنصر تبدیل می شود و سپس طوطی به سیستم جدید کشیده می شود. بنابراین، در این مثال، سیستم مختصات فعلی مقیاس شده است. این اثر مشابه اثر استفاده است viewBox = "0 0 400 300"، که به سیستم مختصات “زوم” می کند، بنابراین حجم محتوای داخل آن دو برابر می شود (اگر قبلاً این کار را نکرده اید به قسمت 1 مجموعه مراجعه کنید).

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

سیستم مختصات فعلی جدید طوطی در حین “زوم کردن” به طوطی مقیاس می شود. توجه داشته باشید که در سیستم مختصات فعلی خود، طوطی تغییر مکان نمی دهد – فقط اثر مقیاس گذاری سیستم مختصات آن را در نمای دید تغییر مکان می دهد. طوطی به سادگی در مختصات x و y اصلی خود در سیستم مقیاس جدید ترسیم می شود.

بیایید سعی کنیم طوطی را در هر دو جهت با استفاده از فاکتورهای مختلف پوسته‌گیری مقیاس کنیم. اگر طوطی را با اعمال مقیاس کنیم transform="scale(2 0.5)عرض آن را دو برابر می کنیم در حالی که ارتفاع آن را نصف می کنیم. اثر مشابه برنامه خواهد بود viewBox="0 0 400 1200".

به موقعیت طوطی در سیستم مختصات مقیاس شده توجه کنید و آن را با موقعیت در سیستم اصلی (طوطی نیمه شفاف) مقایسه کنید: مختصات موقعیت x و y حفظ می شوند.

تحریف یک عنصر در SVG همچنین باعث می شود که عنصر در نتیجه اعوجاج سیستم مختصات فعلی آن “حرکت” کند.

فرض کنید با استفاده از یک تبدیل تابدار به سگ در امتداد محور x اعمال می کنیم skewX تابع ما سگ را 25 درجه به صورت افقی کج می کنیم.

svg width="800" height="800" viewBox="0 0 800 600">
	
	g id="dog" transform="skewX(25)">
		
	g>
svg>

تصویر زیر نتیجه اعمال تبدیل تار به سگ را نشان می دهد. سیستم مختصات او مانند خود سگ مخدوش است.

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

تصویر زیر نتیجه تاب برداشتن سگ را در همان زاویه با استفاده از آن نشان می دهد skewY() به جای skewX:

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

svg width="800" height="800" viewBox="0 0 800 600">
	g id="parrot" transform="rotate(45)">
		
	g>
	
svg>

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

احتمالاً می خواهید عنصری را حول نقطه ای غیر از مبدا پیش فرض سیستم مختصات بچرخانید. با کمک rotate() تابع ج transform ویژگی، شما می توانید به صراحت این نقطه را مشخص کنید. فرض کنید می خواهیم طوطی را در این مثال در مورد مرکز خودش بچرخانیم. با توجه به عرض و ارتفاع و موقعیت طوطی می توانم مرکز آن را تقریباً (150 و 170) تعیین کنم. طوطی می تواند حول این نقطه بچرخد:

svg width="800" height="800" viewBox="0 0 800 600">
	g id="parrot" transform="rotate(45 150 170)">
		
	g>
	
svg>

در این مرحله طوطی می چرخد و به شکل زیر خواهد بود:

گفتیم که تبدیل ها به سیستم مختصات اعمال می شود و بنابراین عنصر در نهایت تحت تأثیر قرار می گیرد و تبدیل می شود. بنابراین دقیقاً تغییر مرکز چرخش در سیستم مختصاتی که مبدا آن در نقطه (0، 0) است، چگونه عمل می کند؟

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

g id="parrot" transform="rotate(45 150 170)">	

توسط مرورگر به عنوان یک سری عملیات ترجمه و چرخش معادل با:

g id="parrot" transform="translate(150 170) rotate(45) translate(-150 -170)">	

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

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

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

به عنوان مثال، موارد زیر نتیجه تغییر فضای کاربری کل بوم از است viewBox="0 0 800 600" به viewBox="0 0 600 450". کل بوم مقیاس بندی شده است و هرگونه تغییر و تحول اعمال شده روی عناصر جداگانه حفظ می شود.

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

در بسیاری از مواقع ممکن است بخواهید چندین تبدیل روی یک عنصر اعمال کنید. اعمال تبدیل های متعدد در یک ردیف همان چیزی است که به آن تبدیل های “زنجیره ای” می گویند.

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

برای مثال، اگر می‌خواهید یک چرخش را برای یک عنصر و به دنبال آن ترجمه اعمال کنید، ترجمه بر اساس سیستم مختصات جدید انجام می‌شود، نه بر اساس سیستم مختصات اصلی.

مثال زیر دقیقاً این کار را انجام می دهد. چرخش قبلی را اعمال می کنیم و سپس طوطی را 200 واحد در امتداد محور x مثبت حرکت می دهیمtransform="rotate(45 150 170) translate(200)".

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

توجه داشته باشید که وقتی یک عنصر و سیستم مختصات آن را با آن تاب می‌دهید، سیستم مختصات دیگر متعامد نخواهد بود و مختصات دیگر به صورت متعامد محاسبه نمی‌شوند، آنها مختصات تابیده می‌شوند. به عبارت ساده، این به معنای آن است که مبدا سیستم مختصات دیگر زاویه 90 درجه نیست و بنابراین مختصات جدید بر اساس این زاویه جدید محاسبه می شود.

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

[For nested transformations,] تبدیل اعمال شده به عنصر فرزند انباشته ای از تحولات اعمال شده بر اجداد آن و تبدیل اعمال شده بر آن خواهد بود.

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

این به ویژه زمانی مفید است که می خواهید یک عنصر را نسبت به عنصر دیگر تبدیل کنید. به عنوان مثال، فرض کنید می خواهید دم یک سگ را متحرک کنید. دم از نوادگان است #dog گروه

svg width="800" height="800" viewBox="0 0 800 600">
	
	g id="dog" transform="translate(..)">
		
		g id="head">
			
		g>
		g id="body" transform="rotate(.. .. ..)">
			path id="tail" d="..." transform="rotate(..)">
				
			path>
			g id="legs">
				
			g>
		g>
	g>
svg>

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

هنگامی که دم نیاز به چرخاندن دارد، سیستم مختصات تبدیل شده جد خود را به ارث می برد.#body، که به نوبه خود سیستم مختصات تبدیل شده قبلی تبدیل شده خود را به ارث می برد (#dog) نیز بنابراین، در واقع، هنگامی که دم چرخانده می شود، مانند آن است که ترجمه شده است (با همان ترجمه #dog گروه) سپس چرخید (با همان چرخش #body گروه)، و سپس با چرخش خودش چرخیده و تاثیر اعمال یک سری تبدیل در اینجا همان است که در مثال زنجیره ای بالا توضیح دادیم.

بنابراین، می بینید، تبدیل های تو در تو عملاً همان تأثیر را دارند که آنها را به زنجیر می زنند #tail.

تبدیل SVG از طریق خصوصیات CSS

در SVG 2، transform ویژگی نامیده می شود transform اموال؛ این به این دلیل است که تبدیل های SVG به مشخصات CSS3 Transforms “صادرات” شده اند. دومی مشخصات تبدیل SVG، تبدیل CSS 2D و تبدیل CSS 3D را ترکیب کرده و ویژگی هایی مانند transform-origin و تبدیل های سه بعدی در SVG.

ویژگی های تبدیل CSS مشخص شده در مشخصات تبدیل CSS را می توان برای عناصر SVG اعمال کرد. با این حال، مقادیر برای transform توابع ویژگی باید از نحو مشخص شده در مشخصات CSS پیروی کنند: آرگومان های تابع باید با کاما از هم جدا شوند – تنها تفکیک فاصله معتبر نیست، اما می توانید یک یا چند فضای خالی قبل و/یا بعد از کاما اضافه کنید. و در rotate() تابع نمی پذیرد مقادیر در حال حاضر – مرکز چرخش با استفاده از تعیین می شود transform-origin دارایی علاوه بر این، توابع تبدیل CSS واحدهایی را برای زوایا و مختصات می پذیرند، مانند rad (رادیان) برای زوایا (از جمله) و px، emو غیره برای مقادیر مختصات.

یک مثال از چرخاندن یک عنصر SVG با استفاده از CSS ممکن است به شکل زیر باشد:

#parrot {
	transform-origin: 50% 50%; 
	transform: rotate(45deg);
}

و عنصر SVG همچنین می تواند با استفاده از تبدیل های سه بعدی CSS به فضای سه بعدی تبدیل شود. توجه داشته باشید که سیستم های مختصات هنوز با سیستم های مختصات ایجاد شده بر روی عناصر HTML متفاوت هستند. این بدان معناست که چرخش های سه بعدی نیز متفاوت به نظر می رسند مگر اینکه مرکز چرخش را تغییر دهید.

#SVGel {
	transform: perspective(800px) rotate3d(1, 1, 0, 45deg);
}

از آنجایی که تبدیل عناصر SVG با CSS تقریباً مانند تبدیل عناصر HTML با CSS است – از نظر نحوی – از پرداختن به آن موضوع در این مقاله صرف نظر می کنم.

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

توجه داشته باشید که هنگامی که CSS Transforms به طور کامل برای عناصر SVG پیاده سازی شد، توصیه می شود از دستور تابع تبدیل CSS حتی در هنگام اعمال تبدیل به شکل transform ویژگی که گفت، نحو بالا از transform توابع ویژگی همچنان معتبر خواهند بود.

انیمیشن transform

تبدیل های SVG می توانند متحرک شوند، درست مانند تبدیل های CSS. اگر از CSS استفاده می کنید transform برای تبدیل SVG، می‌توانید با استفاده از انیمیشن‌ها و انتقال‌های CSS، تبدیل را متحرک کنید، همانطور که تبدیل‌های CSS را روی عناصر HTML متحرک می‌کنید.

SVG transform ویژگی را می توان با استفاده از SVG متحرک کرد عنصر را عنصر یکی از سه عنصر در SVG است که برای متحرک سازی ویژگی های مختلف SVG استفاده می شود.

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

کلمات پایانی

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

با این حال، هنگامی که نحوه کار آنها را درک کردید، کنترل بهتری بر بوم SVG خود به دست خواهید آورد و می توانید عناصر را راحت تر دستکاری کنید.

در قسمت پایانی این مجموعه، به تعبیه SVG و ایجاد پنجره‌ها و ویو باکس‌های جدید می‌پردازم. با ما همراه باشید!

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

امیدوارم از این مقاله لذت برده باشید و برای شما مفید بوده باشد. با تشکر از شما برای خواندن!