#html
#وب
#آموزش
دوستان به دلیل پایین بودن کیفیت تصویر ، تمام اون کد های داخل تصویر به صورت یه فایل در اختیار شما گذاشته شد.

نکته: دوستان شما الان با حجم بالایی از تگ های meta و link مواجه شدید ،شاید نگران این باشید که این همه کد رو اصلا بلد نیستید و نمیدونید چیه ، اول اینکه باید بگم که ما متاتگ های مهم رو برسی کردیم و حتما هم نیاز نیست شما این همه متاتگ رو بلد باشد ، تنها کافیه بدونید که این متاتگ ها وجود دارند و هرکجا نیازتون بود با یک سرچ ساده کد موردنظر خودتون رو پیدا کنید.
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش🌹
بریم سراغ ادامه ی یادگیری

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

تنها صفتی که این تگ میگیرد مقدار name هست و نام map رو مشخص میکند و وجود این صفت اجباری است.

برای متصل کردن تگ map به تصویر باید داخل تگ img از صفت usemap استفاده کنیم و داخل این صفت ابتدا کاراکتر (#) را مینویسیم سپس نام تگ map رو مینویسیم.

برای مشخص کردن محدوده ی مورد نظرمان داخل تصویر باید از تگ <area>
داخل تگ map استفاده کنیم و با استفاده از این تگ و صفت های مخصوص خودش محدوده ی مورد نظر خودمان را ایجاد بکنیم.
مقادیری که این تگ میگیرد به صورت زیر است:👇

alt
با این مقدار ما میتوانیم یک‌ متن رو تعریف کنیم که وقتی کاربر ماوس خود را روی محدوده ی موردنظر برد اون متن نمایش داده شود.

coords
با این صفت ما میتوانیم محدوده ی مورد نظر خودمان را مشخص کنیم در کل مقدار این صفت مختصات محدوده خواهد بود.

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

href
ادرس یک لینک را میگیرد که ما انتظار داریم کاربر با کلیک روی محدوده ی موردنظر به ادرس اون لینک هدایت شود.

hreflang
مقدار این صفت یک کد زبان خواهد بود ، زبان اون لیک موردنظر را مشخص میکند.

media
مشخص می‌کند که لینک وارد شده برای چه رسانه یا دستگاهی بهینه است. (برای ریسپانسیو کردن صفحات وب مورد استفاده قرار می‌گیرد.)

nohref
فعال بودن یا غیر فعال بودن لینک‌ها را مشخص می‌کند.
True‌
به معنای فعال بودن هست
False
به معنای غیر فعال بودن هست
این صفت در html5 پشتیبانی نمیشود.

rel
ارتباط بین صفحه ی جاری با صفحه ی مقصد را مشخص میکند ، این صفت اختیاری میباشد.

shape
ما با استفاده از این تگ میتوانیم محدوده ی خودمان را به شکل های مختلف بسازم ، برای مثال میتوانیم محدوده ی خودمان را به شکل دایره ، مربع ، مستطیل ، چند ضلعی و... تعریف نماییم. مقادیر این صفت به شکل زیر هست:👇

1:default
ابن مقدار حالت پیش فرض هست و عملکرد خاصی ندارد.

2:rect
با این مقدار میتوانیم مربع و یا مستطیل برای محدوده ی موردنظرمان تعریف کنیم.

3:circle
با این مقدار میتوانیم دایره برای محدوده ی موردنظرمان تعریف کنیم.

4:poly
با این مقدار میتوانیم چند ضلعی های مختلفی را برای محدوده ی موردنظرمان تعریف کنیم.

target
با این صفت و مقادیرش کاملا در قسمت لینک ها کار کردیم و دیگه نیاز به برسی نداره چون کاملا این مورد رو بلد هستید.

type
این صفت هم نوع رسانه صفحه را مشخص میکند.


خصوصیت shape شکل مکانی مورد نظرمان در تصویر را مشخص می‌کند و انواع مختلفی دارد؛ همچنین خصوصیت coords نیز پس از مشخص شدن نوع shape مختصات محدوده مورد نظرمان را مقدار دهی می‌کند و مشخص می‌کند.

ادامه در پست بعدی ...
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
برسی مقادیر صفت shape:

شکل rect یا مربع/مستطیل: با مقدار x1 و y1 برای مشخص کردن مختصات بالا چپ و با مقدار x2 و y2 برای مشخص کردن مختصات پایین راست معرفی می‌شود دقیقا به این صورت:

croods=x1,y1,x2,y2
coords=left,top,right,bottom

برای مثال:
<img usemap="#img" src="image.jpg">
<map name="img">
<area shape="square" coords="0,0,60,60" href="test1.html">
<area shape="square" coords="80,80,200,150" href="test2.html">
</map>


شکل circle یا دایره:
برای مشخص کردن مختصات به صورت دایره‌ای از طریق ۳ متغیر طول – عرض و شعاع (x,y,r) اقدام می‌کنیم.

متغیر x و y محل دقیق مرکز دایره را مشخص می‌کنند و متغیر r نیز شعاع دایره را مشخص می‌کند. بنابراین پس از مشخص کردن متغیر ها ما دایره‌ای به شعاع r و به مرکزیت x و y خواهیم داشت ، دقیقا به صورت زیر:
coords=x,y,r
coords=height,width,radius

برای مثال:
<img usemap="#img" src="image.jpg">
<map name="img">
<area shape="circle" coords="30,30,10" href="test1.html">
<area shape="circle" coords="80,80,40" href="test2.html">
</map>


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

برای مشخص کردن مختصات‌های مورد نظر به صورت x1,y1 سپس x2,y2 الی آخر به ترتیب مختصات‌ها را وارد می‌کنیم ,دقیقا به صورت زیر: (coords=x1,y1,x2,y2,x3,y3,…,xn,yn)

برای مثال:
<img usemap="#img" src="image.jpg">
<map name="img">
<area shape="poly" coords="100,0,150,60,10,40" href="test1.html">
</map>


دوستان همینطور که در مثال ها مشاهده کردید ما میتوانیم از چندین تگ area برای مشخص کردن چندین محدوده و مختصات استفاده کنیم.

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


تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش🌹
بریم سراغ ادامه ی یادگیری

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

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

ادرس وبسایت:
image-map.net

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

1:Select image from my pc
2:Load image from website

با استفاده از گزینه ی اول ایمیج خودمون رو انتخاب میکنیم.

بعد زیر تصویری که انتخاب کردیم چندین گذینه وجود داره:

1:Active
اگر دقت کنید در زیر این کلمه یک اینپوت از نوع radio وجود داره که مشخص میکنه کدوم یک از تگ‌ های Area که ساختیم فعال باشه و بتونیم مقادیر خودمون رو روی اون اعمال کنیم.

2:shape
در زیر این ما میتوانیم یکی از مقادیر rect , poly , circle را انتخاب کنیم. در پست قبلی صفت shape و مقادیرش به صورت کامل توضیح داده شده.

3:link
در زیر این کلمه داخل اینپوت باید ادرسی رو وارد کنیم که انتظار داریم کاربر با کلیک روی نقشه ی تصویری به اون ادرس منتقل شود.

4:title
در این قسمت باید کلمه ای بنویسیم که وقتی کاربر ماوس خود را روی نقشه ی تصویری میبرد اون کلمه نمایش داده شود.

5:target
در این قسمت میتوانیم نحوه ی بارگذاری صفحه ی مقصد رو مشخص کنیم که یکی از مقادیر blank , self , parent , top را اختیار میکند که با این مقادیر قبلا کاملا اشنا شده ایم.

6:X
علامت ضربدر اگر روی اون کلیک کنید اون تگ Area که ساخته اید حذف خواهد شد.

7:+Add new Area
این دکمه ی قرمز رنگ ،اگر روی اون کلیک شود یک تگ Area ایجاد میکند تا ما بتوانیم از چندین تگ Area داخل تگ map استفاده کنیم.

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

rect
برای مشخص کردن محدوده ، دوبار رو تصویر کلیک کنید و بعد از دایره های ایجاد شده به بالا و پایین و چپ و راست ماوس رو حرکت دهید.

poly
روی تصویر و محدوده های مورد نظر کلیک کنید تعداد کلیک بستگی به خودتون داره چون این مقدار چندضلعی ایجاد میکنه.

circle
برای این مقدار روی تصویر دوبار باید کلیک کنید ، کلیک اول مرکز دایره رو مشخص میکند و کلیک دوم شعاع دایره رو مشخص میکند.

بعد از اینکه تمام مراحل رو انجام دادید ، در نهایت روی دکمه ی show me the code کلیک کنید و کد مورد نظر رو کپی کنید و در برنامه ی خودتان استفاده کنید.

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


تمرین یادتون نره⁦❤️⁩

@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<svg>
تگ svg در واقع یک ظرف برای نگهداری اشکال هندسی از جمله دایره ، مربع ، مستطیل ، مثلث , چندضلعی ، و... هست.
ما با استفاده از این تگ‌ میتوانیم اشکال هندسی رو طراحی و در سایت و صفحه ی خودمان استفاده کنیم.
مهم ترین صفت هایی که این تگ میگیرد به صورت زیر است:👇

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

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

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

viewbox="0 0 300 400"

اولین مقدار فاصله ی محدوده ی تگ svg نسبت به گوشه های مرورگر در محور x رو مشخص میکند


دومین مقدار فاصله ی محدوده ی تگ svg نسبت به گوشه های مرورگر در محور y رو مشخص میکند

سومین و چهارمین مقدار ، عرض و ارتفاع میگیرند ، نکته ای که باید در این دو مقدار بهش توجه داشته باشید اینه که هرچقدر این دو مقدار نسبت به صفت های width, height کم تر باشد به نوعی ویو پورت به جلو کشیده میشه ، در واقع زوم میشه و هرچقدر این مقادیر نسبت به width, height زیاد باشه ویو پورت کوچک تر میشود.

از جلسه ی بعدی میریم سراغ رسم اولین شکل هندسی


تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

در این پست قصد داریم ساخت مربع و مستطیل را در svg یاد بگیریم.

<rect>
با استفاده از این تگ میتوانیم یک مربع یا مستطیل را به روش svg ایجاد کنیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

width
این صفت عرض شکل ما را مشخص میکند.

height
این صفت ارتفاع شکل ما را مشخص میکند.

نکته: اگر مقدار صفت width , height باهم برابر باشند ، شکل موردنظر مربع خواهد ‌بود ، اما اگر نه باهم برابر نباشند شکل موردنظر میتواند شکل های دیگر از جمله مستطیل باشد‌.

x
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی مرورگر را در محور x (افقی) را مشخص میکنیم

y
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی مرورگر را در محور y (عمودی) را مشخص میکنیم

نکته: پیشنهاد میشه حداقل برای دو صفت x,y یک مقدار کمی را به صورت پیش فرض اعمال کنیم تا شکل موردنظر در گوشه ی viewport برش نخوره و به صورت کامل نمایش داده بشه.

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

fill
با این صفت رنگ پس زمینه ی شکل موردنظر خود را مشخص میکنیم

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


تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<circle>
با استفاده از این تگ میتوانیم یک دایره به روش svg ایجاد کنیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

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

cx
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی viewport را در محور x (افقی) را مشخص میکنیم

cy
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی viewport را در محور y (عمودی) را مشخص میکنیم

نکته: پیشنهاد میشه حداقل برای دو صفت cx,cy یک مقداری رو به صورت پیشفرض اعمال کنیم تا شکل موردنظر در گوشه ی مرورگر برش نخورد و به صورت کامل نمایش داده شود.

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

fill
با این صفت رنگ پس زمینه ی شکل موردنظر خود را مشخص میکنیم


دوستان حتما تمرین کنید ، حداقل روزی 20 دقیقه برای هر پست وقت بزارید تا حرفه ای بلد باشید نه اینکه فقط بدونید این تگ هم هست و رد بشید حتما تمرین کنید تا در پروژه هایی که در اینده خواهید داشت به مشکل نخورید و بتونید با حداکثر کیفیت پروژه ی خودتون رو عملی کرده و بسازید.


تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش

روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<ellipse>
با استفاده از این تگ میتوانیم یک بیضی به روش svg ایجاد کنیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

نکته: بیضی با دایره فرق داره برای دایره یک عدد شعاع نیاز داشتیم اما برای بیضی حتما به دو عدد شعاع در محور های مختلف نیاز داریم.

rx
با این صفت شعاع بیضی در محور x رو مشخص میکنیم.

ry
با این صفت شعاع بیضی در محور y رو مشخص میکنیم.

نکته: برای ایجاد بیضی حتما باید مقدار rx بیشتر از مقدار ry باشد.

cx
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی viewport را در محور x (افقی) را مشخص میکنیم

cy
با استفاده از این صفت فاصله ی شکل موردنظر از گوشه ی viewport را در محور y (عمودی) را مشخص میکنیم

نکته: پیشنهاد میشه حداقل برای دو صفت cx,cy یک مقداری رو به صورت پیشفرض اعمال کنیم تا شکل موردنظر در گوشه ی مرورگر برش نخورد و به صورت کامل نمایش داده شود.

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

fill
با این صفت رنگ پس زمینه ی شکل موردنظر خود را مشخص میکنیم


دوستان حتما تمرین کنید ، حداقل روزی 20 دقیقه برای هر پست وقت بزارید تا حرفه ای بلد باشید نه اینکه فقط بدونید این تگ هم هست و رد بشید حتما تمرین کنید تا در پروژه هایی که در اینده خواهید داشت به مشکل نخورید و بتونید با حداکثر کیفیت پروژه ی خودتون رو عملی کرده و بسازید.


تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش

روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<line>
با استفاده از این تگ میتوانیم یک خط به روش svg ایجاد کنیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

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

x1
این صفت مشخص کننده ی اولین مختصات در محور x (افقی) را مشخص میکند.

y1
این صفت مشخص کننده ی اولین مختصات در محور y (عمودی) را مشخص میکند.

x2
این صفت مشخص کننده ی دومین مختصات در محور x (افقی) را مشخص میکند.

y2
این صفت مشخص کننده ی دومین مختصات در محور y (عمودی) را مشخص میکند.

نکته: برای نمایش دادن خط باید حتما از صفت stroke استفاده کنیم.

stroke
این صفت رنگ border (خطوط حاشیه ی خط) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.



تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<polyline>
با استفاده از این تگ میتوانیم یک چندخطی به روش svg ایجاد کنیم ، برای مثال میتوانیم با چندخطی یک پله بسازیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

points
دوستان در پست قبلی و در تگ line مشاهده کردید که ما برای ایجاد یک خط به دو عدد مختصات نیاز داشتیم که با x1,y1 و x2,y2 ابتدا و انتهای خط خودمون رو مشخص میکردیم.
این صفت کاری که انجام میده این است که مختصات های مارو خلاصه نویسی میکنه یعنی ما دیگه از x1,y1 و x2,y2 استفاده نمیکنیم و هر چندتا که مختصات داشتیم مستقیم داخل همین صفت مینویسیم.
برای مثال:

<polyline points="50,100 120,120">

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

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.
این صفت برای نمایش دادن خط های موجود الزامیه.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

fill
با این صفت رنگ پس زمینه ی شکل موردنظر خود را مشخص میکنیم



تمرین یادتون نره⁦❤️⁩
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<polygon>
با استفاده از این تگ میتوانیم یک چندضلعی به روش svg ایجاد کنیم ، برای مثال میتوانیم با چندضلعی یک ستاره بسازیم ، این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

points
دوستان کارایی این صفت در این تگ دقیقا مثل تگ polyline هست و دقیقا همون نکاتی که در پست قبلی و تگ قبلی گفتیم رو شامل میشه.
تنها نکته ای که در این تگ و صفت اضافه میشه , این هست که ما برای ایجاد یک چندضلعی حتما نیاز به 3 عدد ضلع داریم.
و شما باید برای ایجاد مثلا مثلث فقط مختصات ضلع هاش رو تعیین کنید ، ساختار چندضلعی طوریه که خودش نقاط مختلف رو تشخیص میده و بهش متصل میشه.

stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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



تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<path>
دوستان با این تگ ما میتوانیم انواع مختلف از اشکال هندسی مثل مربع ، مثلث ، مستطیل ، خط ، خط منحنی و... رو به روش svg ایجاد نماییم.
این تگ حتما باید داخل تگ svg قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است: 👇

نکته: دوستان برای ایجاد اشکال مختلف داخل این تگ ما به کلمه های کلیدی احتیاج داریم.
که ما در این پست سه کلمه ی کلیدی M , L , Z رو برسی خواهیم کرد.

d
با استفاده از این صفت ما میتوانیم از کاربرد کلمه های کلیدی استفاده کنیم و مختصات مدنظر خودمون رو اعمال کنیم.
به مثال زیر توجه کنید:👇

<path d="M50 50 L100 120 L140 120 L190 50 Z">
</path>

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

کاربرد کلمه ی کلیدی M در مثال بالا:

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

کاربرد کلمه ی کلیدی L در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط ایجاد بکنیم ، در مثال بالا درست از اون مختصاتی که در کلمه ی کلیدی M مشخص کردیم شروع به ترسیم میکنه تا به اون مختصاتی که در کلمه ی کلیدی L مشخص کردیم.
همانطور که در مثال بالا مشاهده میکنید ما از چندین کلمه ی کلیدی L استفاده کردیم ، علتش این بوده که بتونیم چندین خط رو رسم کنیم و در نهایت یک شکل هندسی بسازیم.

کاربرد کلمه ی کلیدی Z در مثال بالا:

دوستان فرض کنید ما یک مربع میخواهیم بسازیم و خطوط پایین و کناری رو ساخته ایم و تنها خط بالا مونده ، ما بجای اینکه برای اون خط مختصات بدیم , بجاش از کلمه ی کلیدی Z استفاده میکنیم ، این کلمه میاد و خودش اون نقاط رو تشخیص میده و اون نقاط رو به هم وصل میکنه ، به نوعی شکل مارو میبنده close میکنه.

نکته: دوستان وقتی از کلمات کلیدی استفاده میکنیم برای جدا سازی مختصات ها از کاراکتر ( , ) استفاده نمیکنیم.


stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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

ادامه ی این مبحث در پست بعدی ...


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
خب دوستان بریم سراغ ادامه ی یادگیری کلمات کلیدی

در این پست قصد داریم به اموزش دو کلمه ی کلیدی H , V بپردازیم.

به مثال زیر توجه کنید:👇

<path d="M50 50 H100 V100 H50 Z">
</path>

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

کاربرد کلمه ی کلیدی M در مثال بالا:

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

کاربرد کلمه ی کلیدی H در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط در محور x (افقی)ایجاد بکنیم و این خط دقیقا از اون مختصاتی که در کلمه ی کلیدی M مشخص کردیم شروع به ترسیم میکنه و یک پارامتر میگیره که مشخص کننده ی مختصاتی هست که خط از کلمه کلیدی M تا اون مختصات رسم خواهد شد.
همانطور که در مثال بالا مشاهده میکنید ما از چندین کلمه ی کلیدی H استفاده کردیم ، علتش این بوده که بتونیم چندین خط رو رسم کنیم و در نهایت یک شکل هندسی بسازیم.

کاربرد کلمه ی کلیدی V در مثال بالا:

با استفاده از این کلمه ی کلیدی میتوانیم یک خط در محور y (عمودی)ایجاد بکنیم و این کلمه ی کلیدی مثل کلمه ی کلیدی قبلی عمل میکنه و از انتهای مختصات کلمه ی کلیدی H شروع به ترسیم میکنه.


کاربرد کلمه ی کلیدی Z در مثال بالا:

دوستان فرض کنید ما یک مربع میخواهیم بسازیم و خطوط پایین و کناری رو ساخته ایم و تنها خط بالا مونده ، ما بجای اینکه برای اون خط مختصات بدیم , بجاش از کلمه ی کلیدی Z استفاده میکنیم ، این کلمه میاد و خودش اون نقاط رو تشخیص میده و اون نقاط رو به هم وصل میکنه ، به نوعی شکل مارو میبنده close میکنه.

نکته: دوستان وقتی از کلمات کلیدی استفاده میکنیم برای جدا سازی مختصات ها از کاراکتر ( , ) استفاده نمیکنیم.


stroke
این صفت رنگ border (خطوط حاشیه ی شکل) را مشخص میکند.

stroke-width
این صفت ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.

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

ادامه ی کلمات کلیدی در پست بعدی ...

تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست و در چندین پست بعدی ما قصد داریم به رسم خطوط منحنی در svg بپردازیم.
دوستان چندین کلمه کلیدی برای رسم خطوط منحنی وجود داره و ما در این پست به برسی کلمه کلیدی C خواهیم پرداخت.

به مثال زیر توجه کنید:👇

<path d="M50 30 C80 90 10 220 220 100"></path>

در جلسات گذشته کاملا با کاربرد کلمه ی کلیدی M پرداختیم و بدون شک دقیقا شما کارایی این کلمه کلیدی رو درک کردید و میدونید.
پس فقط به توضیحات کلمه کلیدی C میپردازیم:👇

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

همانطور که مشاهده میکنید هریک از پارامتر ها دوتا عدد میگیره که عدد اولی مختصات x(محور افقی) و عدد دومی مختصات y(محور عمودی) رو مشخص میکنه.

و برای نمایش دادن خط طبق روال همیشگی از صفت های

1: stroke
2: stroke-width
3: fill

برای تگ path استفاده میکنیم که هر یک از این موارد رو در پست های قبلی به صورت کامل اموزش داده ایم.

کارایی این کلمه ی کلیدی دقیقا مثل ابزار pen در نرم افزار Adobe illustrator هستش که اون دسته از افرادی که با این ابزار اشنا باشن درک راحت تری از این کلمه کلیدی خواهند داشت.


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به تفاوت کلمه کلیدی های کوچک با کلمه کلیدی های بزرگ بپردازیم.

در دستورات داخل صفت d بزرگ بودن یا کوچک بودن کلمات کلیدی اهمیت دارد.

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

حروف کوچک نسخه نسبی هستند یعنی به صورت نسبی رسم میشوند.

به عنوان مثال:👇

M100 100
در این مثال مرورگر قلم خود را در مختصات 100 از محور افقی و 100 از محور عمودی قرار میدهد به نوعی ادرس دهی مطلق انجام میدهد.

حالا اگر به شکل زیر باشد:👇

m100 100
اگر کلمه کلیدی روبه صورت کوچک بنویسیم ، مرورگر میاد و از همون جایی که قلم هست 100 واحد به سمت راست و صد واحد به سمت پایین حرکت میکند و شروع به ترسیم میکند و به نوعی ادرس دهی نسبی انجام میدهد.

همانطور که میبینید مبحث خیلی ساده ای هست .

حروف کوچک برای تمامی کلمات کلیدی مورد استفاده قرار میگیرند و تنها تفاوت حروف کوچک با حروف بزرگ در این هست که حروف کوچک واحد را نسبی محاسبه میکند.

نکته: در کلمه کلیدی Z حروف کوچک و بزرگ تفاوتی ندارند.


نکاتی خارج از این پست:👇

نکته: اگر برای دستور M بیشتر از یک نقطه (یک جفت پارامتر) تعیین شود جفت های دیگر به عنوان پارامتر دستور L در نظر گرفته می شوند.

نکته: همانطور که میدانید کلمه کلیدی S دستور مکمل یا میانبر کلمه کلیدی C هست ، همچنین دستور T مکمل یا میانبر کلمه کلیدی Q هست ، با توجه به این نکته بریم سراغ نکته بعدی.

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

نکته: رسم منحنی توسط Q آسان تر است چرا که فقط یک کنترل کننده داریم اما با دستور C می توانیم منحنی های دقیق تر و پیچیده تری رسم کنیم.


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<text>
با این تگ میتوانیم یک متن را به شکل svg ایجاد کنیم.
این تگ حتما باید داخل تگ svg مورد استفاده قرار بگیرد.
مهم ترین صفت های این تگ به شرح زیر است:👇

x
با استفاده از این صفت میتوانیم مکان متن خودمان را نسبت به گوشه ی viewport در محور (x) افقی کنترل و مشخص کنیم.

y
با استفاده از این صفت میتوانیم مکان متن خودمان را نسبت به گوشه ی viewport در محور (y) عمودی کنترل و مشخص کنیم.

font-size
این صفت اندازه ی متن موردنظر رو مشخص میکنه و یک عدد به عنوان مقدار میگیره.

fill
با استفاده از این صفت میتونیم یک رنگ به عنوان بک گراند برای متن خودمان مشخص کنیم.

stroke
با استفاده از این صفت میتوانیم یک border (خطوط حاشیه) برای متن خودمان مشخص کنیم ، همچنین به عنوان مقدار میتوانیم یک رنگ قرار بدیم مثل رنگ red ، درواقع رنگ خطوط حاشیه را با استفاده از این صفت مشخص میکنیم.

stroke-width
این صفت میزان ضخامت border را مشخص میکند و یک عدد به عنوان مقدار میپذیرد.


به عنوان مثال:

<text x="50" y="100" stroke="blue" fill="none" stroke-width="1">frozencoding</text>



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<linearGradient>
دوستان با استفاده از این تگ میتوان یک گرادینت خطی برای اشکال مختلف ایجاد کرد ، منظور از گرادینت خطی یعنی اینکه تمامی رنگهای ایجاد شده در راستای یک خط در کنار هم شروع به قرار گیری میکنند.

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

نکته : دوستان برای این تگ حتما باید از صفت id استفاده کنیم و یک id منحصر به فرد را براش مشخص کنیم ، این id برای متصل کردن گرادینت به اشکال مختلف ضروری است.

<stop>
با استفاده از این تگ میتوان
1: رنگ گرادینت را مشخص کرد.
2: میتوان مشخص کرد که گرادینت مدنظر ما چند درصد از شکل را بگیرد و از کجا شروع به شکل گیری کند.
این تگ حتما باید داخل تگ linearGradient مورد استفاده قرار بگیرد.

نکته: دوستان برای اینکه ما بتوانیم از رنگ های مختلف استفاه کنیم ، برای هر یک از رنگها باید از این تگ استفاده کنیم ، برای مثال میخواهیم از رنگ آبی و قرمز در کنار هم استفاده کنیم ، بنابراین باید برای هریک از رنگها از این تگ استفاده کنیم ، چون دو عدد رنگ داریم پس دو بار از این تگ استفاده میکنیم.
و مهم ترین صفت های این تگ به صورت زیر است:👇

offset
با استفاده از این صفت ما مشخص میکنیم که گرادینت ما چند درصد از شکل مدنظر مارا فرابگیرد.

stop-color
با استفاده از این صفت مشخص میکنیم که اون رنگ گرادینت ما کدام رنگ باشد ، و یک رنگ را به عنوان مقدار میپذیرد.

خب دوستان فرض کنید میخواهیم یک متن داشته باشیم و رنگ این متن به صورت گرادینت و با استفاده از 3 رنگ به صورت تعاملی نمایش داده شود.

پس باید به صورت زیر عمل کنیم:👇

<svg width="400" height="400">
<linearGradient id="frozen">

<stop offset="0%" stop-color="red"></stop>

<stop offset="50%" stop-color="blue"></stop>

<stop offset="100%" stop-color="lime"></stop>

</linearGradient>

<text. x="50" y="200" fill="url(#frozen)">frozencoding</text>

خب دوستان همانطور که مشاهده میکنید ، ما برای اتصال گرادینت به متن خودمان از اون id که به تگ linearGradient داده بودیم استفاده کردیم و داخل صفت fill از url استفاده کردیم و id رو با استفاده از یک (#) به متن متصل کردیم ، گرایدنت ما الان آماده هست و در مرورگر میتوانیم زیبایی این تگ رو مشاهده کنیم.

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

</svg>

<radialGradient>
دوستان این تگ هم دقیقا مثل تگ قبلی عمل میکند ، با این تفاوت که تگ قبلی گرادینت خطی بود ، این تگ گرادینت شعاعی هست.
در این نوع گرادینت برخلاف <linearGradient> که رنگ ها از یک سمت عنصر به سمت دیگر آن در کنار هم قرار می گیرند , رنگ ها از یک نقطه بوجود می آیند و بصورت دایره یا بیضی شکل به سمت بیرون در هم محو می شوند.



تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹

خب دوستان در این پست و چندین پست دیگر قصد داریم به سازماندهی و ساختاربندی عناصر در svg بپردازیم.

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

در این پست و پست های بعدی قصد داریم این عناصر را تعریف و تفاوت های انها را به شکلی ساده بیان کنیم.

<g>
از این عنصر برای گروه بندی عناصری که از نظر منطقی در یک گروه قرار دارند استفاده میشود.

در نرم افزار هایی مثل adobe illustrator نیز ما به کرات عناصر مرتبط را در یک گروه قرار میدهیم تا به قولی اگر بخواهیم این عناصر را جابجا کنیم بتوانیم یکجا و به صورت گروهی جابجاشون کنیم.

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

ما با استفاده از گروه بندی عناصر میتوانیم هر عنصر از این هواپیما را در یک گروه قرار بدهیم.

این عنصر میتواند به صورت تودرتو به کار رود ، یعنی میتوانیم از چندین عنصر g (فرزند) داخل یک عنصر g (والد) استفاده کنیم.

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

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

داخل این عنصر ما میتوانیم از دو تگ <title> و <desc> استفاده کنیم که یکی از ویژگی های عالی این عنصر میباشد.

تگ <title> عنوانی را برای عنصر گروه بندی مشخص میکند و تگ <desc> یک توضیح کوتاه برای این عنصر مشخص میکند.

برای درک بهتر ، میتوانید به کد زیر توجه کنید:👇

<svg>
<g id="cont">
<g id="body">

...
...
...

</g>

<g id=""head>
...
...
...

</g>
</g>
</svg>

خب دوستان در مثال بالا اون سه نقطه ها میتوانند تگ path و یا rect و... باشند.

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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

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

عنصر <use> این عملکرد را که ما در نرم افزارهای گرافیکی داریم در SVG برای ما به ارمغان می آورد. توسط این عنصر می توان یک تک شکل یا گروهی از عناصر <g> را دوباره استفاده کرد.

این تگ صفت های زیر را اختیار میکند:

x
y
width
height
xlink:href

دوستان فرض کنید داخل یک عنصر g با استفاده از تگ rect یک مربع ایجاد کردیم ، خب اگر بخواهیم از این مربع یک کپی ایجاد کنیم باید به این صورت انجامش بدیم.
ابتدا برای اون عنصر g خودمون یک id میدیم بعد این ایدی رو داخل صفت xlink:href قرار میدیم دقت داشته باشید قبل از نوشتن id داخل این صفت حتما ابتدا از یک کاراکتر (#) استفاده کنید.

همچنین برای مشخص کردن مختصات مربع کپی شده باید از صفت های x , y استفاده کنیم و این مختصات نسبت به عنصر اصلی شروع به تغییر مکان خواهد کرد.

نکاتی که باید در خصوص استفاده از این عنصر بدانیم:👇

1: توجه داشته باشید ما می توانیم به هر عنصری توسط xlink:href در عنصر <use> اشاره کنیم حتی اگر آن عنصر در فایل دیگری باشد.

2: مورد دیگری که باید در زمان استفاده از عنصر <use> در نظر داشته باشیم این است که کپی جدید از یک عنصر دیگر تمام استایل ها و تغییر شکل های عنصر اصلی و اولیه را خواهد داشت. پس هر زمان بر روی مربع اصلی استایل جدید اعمال کنیم مربع کپی هم آن استایل و تغییر شکل ها را خواهد داشت.

۳: همچنین این امکان برای ما وجود ندارد تا استایل هایی از قبیل fill و stroke عنصر اصلی را override کنیم. آنها برای عنصر کپی بصورت جداگانه قابل تغییر نخواهند بود.


تمرین یادتون نره⁦❤️⁩


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه مباحث

<defs>
دوستان در پست قبل با عنصر <use> اشنا شدیم و فهمیدیم که به ما اجازه استفاده دوباره از عنصر رسم شده را میدهد ، حالا اگر بخواهیم یک عنصر را تعریف کنیم ولی ان را نمایش ندهیم و بعدا هر زمانی و هرجایی که خواستیم ازش استفاده کنیم چی؟
دقیقا اینجاست که عنصر <defs> قدرت خودش را نشان میدهد.

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

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

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

اگه یادتون باشه در عنصر <use> دو تا نکته داشتیم:

1: مکان عنصر کپی شده نسبت به مکان عنصر اصلی تعیین میشد.
2: ویژگی های عنصر اصلی را نمیتوانستیم در عنصر کپی شده تغییر بدهیم.

هیچکدوم از این دو‌ مورد در عنصر <defs> مثل عنصر <use> عمل نمیکنند.

به مثال زیر توجه کنید 👇

<svg width="400" height="400">

<defs>
<g id="frozen">

<rect width="50" height="50" x="20" y="20" fill="lime">
</rect>

</g>
</defs>
<use xlink:href="#frozen" x="100" y="100">
<use xlink:href="#frozen" x="150" y="100">
</svg>

حالا به نکات زیر توجه کنید 👇

1: اولا اون مربع ها تا زمانی که توسط عنصر <use> مورد استفاده قرار نگیرد رسم نمیشود.

2: اگر برای مثال از سه عدد عنصر <use> استفاده کنیم یعنی بخوایم سه عدد مربع داشته باشیم ، هر کدام از این عناصر به سیستم مختصات خودشان وابسته هستند و نسبت به مکان اصلی عنصر وابسته نیستند چراکه عنصر اصلی اصلا رسم نشده.

3: حالا میتوانیم به مربع های مختلف استایل ها و ویژگی های مختلفی اختصاص بدهیم

4: توجه داشته باشید که حتی اگر ویژگی display این عنصر برابر none باشد ، همچنان میتوان از عناصر و فرزندان داخل اون استفاده کرد.
تمرین یادتون نره⁦❤️

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

<symbol>
این عنصر دقیقا شبیه به عنصر <g> هست و با استفاده از آن میتوان عناصر را گروه بندی کرد.

تفاوت های منحصر به فرد عنصر <symbol> با عنصر <g> در این هست که عنصر <symbol> به هیچگاه رسم نمیشود و به نوعی شبیه عنصر <defs> عمل میکند و زمانی نمایش داده می شود که توسط عنصر <use> مورد استفاده قرار بگیرد.
همچنین این عنصر میتواند ویژگی viewBox مخصوص به خود را داشته باشد که این امر باعث میشود شکل مدنظر ما متناسب با فضاهای مختلف شروع به قرار گیری بکند.

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


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


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir