آموزش path در svg قسمت اول: خطوط صاف

برای شروع کد زیر رو در نظر بگیرید:

<path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>

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

دستورات به دو نوع دستورات مربوط به خط و دستورات مربوط به منحنی تقسیم می شوند که در این نوشته دستورات مربوط به خطوط رو بررسی میکنیم و و در پست بعدی به خطوط منحنی می پردازیم

دستور MoveTo (M,m)

فرض کنید یک بازوی رباتی دارید که می خواهید به کمک آن یک خط بکشید. اول از همه باید به این رباط مختصات نقطه شروع خط را بفرستید و نوک قلم را در مکان دلخواه بر روی کاغذ قرار دهید. در اینجا نیز همیشه اولین دستور یک مسیر، دستور “حرکت کن به” می باشد که نوک قلم را در موقعیت دلخواه قرار می دهد  اما چیزی رسم نمی شود. به عنوان نمونه در کد زیر این دستور باعث می شود که نوک قلم به مختصات (25, 25) حرکت کند.

<path d="M 25,25" />

تفاوت M و m چیه؟

به صورت کلی در ویژگی d حروف بزرگ و کوچک معنای متفاوتی دارند؛ حروف بزرگ نشان دهنده مختصات مطلق و حروف کوچک مختصات نسبی دستور می باشند.

مثلا:

• M 100,100:  قلم را بردار و حرکت بده به نقطه 100 و 100 در سیستم مختصات محیط SVG
• m 100,100:  هرجا که قلم هست نسبت به همان 100 واحد به سمت راست و 100 واحد به سمت پایین حرکت کن

دستور LineTo (L,l)

با استفاده از دستور L یا l می توان یک خط راست رسم کرد.

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

<path d='M 25 25 L 55 43' />

در این مثال دستور M بازوی ربات فرضی ما را به نقطه (25,25) می‌برد و سپس با استفاده از دستور L به ربات دستور میدهیم یک خط از آن نقطه تا نقطه (55,43) رسم کن.

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

نکته مهم

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

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

<path d="M 10 20 30 40 50 60" />
<path d="M 10 20 L 30 40 L 50 60" />

دستور Vertical LineTo (V,v)

با استفاده از دستور V می توانیم یک خط راست در راستای عمودی رسم کنیم. این دستور فقط یک پارامتر می گیرد که آن پارامتر نقطه ای خواهد بود که قلم باید به آن نقطه حرکت کند و خط راست عمودی را رسم کند:

<path d="M 10 10 V 90" />

دیگه نمیگم که دستور v با حرف کوچک بر اساس مختصات نسبی عمل می کنه… بگم؟

دستور Horizontal LineTo (H,h)

با استفاده از دستور H می توانیم  یک خط راست در راستای افقی رسم کنیم. این دستور فقط یک پارامتر می گیره که آن پارامتر نقطه ای خواهد بود که قلم باید به  تا آن نقطه یک خط راست افقی رو رسم کند:

<path d="M 10 10 H 90" />

تصویر زیر را با استفاده  از دو دستور H-h و V-v ایجاد کردیم. نگاهی به کدش بیاندازید.

<path class="st0" d="M 25 25 h 20 v 20 h 20 v-20 h 20 v 20 h 20 v-20 h 20 v 20 h 20 v-20 h 20 v 20 h 20 v-20 h 20 v 20 h 20 v-20 h 20 "/>

دستور Closepath (Z, z)

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

<path d="M 20 20 V 80 H 80 L 20 20 "/>

با استفاده از دستور Z این کار را ساده تر میکنیم. کار این دستور این است که مسیر را در هرجا که هست ببندد و این کار را با ترسیم یک خط به آخرین محلی که برای قلم با استفاده از دستور M تعیین شده است، انجام می دهد. در مثال بالا آخرین باری که مکان قلم تعیین شده است همان یک بار است که مکان قلم در نقطه 20 و 20 قرار گرفته است. حال با اضافه کردن دستور Z به آخر دستورات مسیر بسته می شود و ما همان مثلث رو خواهیم داشت.

<path d="M 20 20 V 80 H 80 z "/>

در واقع دستور Z جایگزین آخرین دستور  ، L 20 20 می شود.

توجه داشته باشید که در مورد این دستور تفاوتی بین Z و z وجود ندارد.