عنصر Path یا مسیر در SVG

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

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

در ساخت اشکال پایه نیاز به ویژگی هایی مثل width و height برای تعیین اندازه یک شکل و هینطور نیاز به ویژگی هایی مثل x برای تعیین موقعیت شکل هستیم. در عنصر <path> شکل نهایی با استفاده از ویژگی d تعیین می شود که ویژگی d شامل یک سری دستورات و مقادیر می باشد.

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

<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"/>

می توانیم کد را خوناتر کنیم طوری که هنوز معتبر باشد:

<path d="
  M 213.1,6.7
  c -32.4-14.4-73.7,0-88.1,30.6
  C 110.6,4.9,67.5-9.5,36.9,6.7
  C 2.8,22.9-13.4,62.4,13.5,110.9
  C 33.3,145.1,67.5,170.3,125,217
  c 59.3-46.7,93.5-71.9,111.5-106.1
  C 263.4,64.2,247.2,22.9,213.1,6.7
  z" />

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

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

دستورات خط

دستور M, m MoveTo

وقتی می خواهیم با قلم روی کاغذ چیزی بکشیم اولین کاری که می کنیم این است که نوک قلم را در مکان دلخواه بر روی کاغذ قرار می دهیم. در اینجا نیز همیشه اولین دستور یک مسیر، دستور حرکت کن به می باشد که نوک قلم را در موقعیت دلخواه قرار می دهد.

<path d="M 213.1,6.7" />

به عنوان نمونه در مثال بالا این دستور باعث می شود که نوک قلم به مختصات (213.1, 6.7) حرکت کند.

نکته ای که باید توجه کنیم این است که این دستور باعث ترسیم نمی شود و کار آن تنها تعیین مکان قلم می باشد.

چه تفاوتی بین M و m وجود دارد؟

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

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

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

دستور L, l LineTo

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

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

<path d='M 16 16 L 48 32' />

در این مثال دستور M قلم را به نقطه (16,16) می برد و سپس دستور L قلم را به نقطه (48,32) می برد اما این بار بر خلاف دستور M این کار را با کشیدن یک خط انجام می دهد.

 

 

حال اگر از حرف کوچک l استفاده کنیم قلم از همان نقطه ای که هست 48 واحد به سمت راست و 32 واحد به سمت پایین می رود:

<path d='M 16 16 l 48 32' />

 

 

نکته مهم

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

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

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

همچنین دو مسیر زیر:

<path d="m 10 10 30 30 30 50" />
  
<path d="m 10 10 l 30 30 l 30 50" />

دستور H, h Horizontal LineTo

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

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

و همانطور که تا الان آموختیم دستور h که با حرف کوچک است نقطه را نسبی محاسبه می کند.

دستور V, v Vertical LineTo

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

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

همچنین دستور v که با حرف کوچک است نقطه را نسبی محاسبه می کند.

در مثال زیر از هر دو دستور H و V استفاده شده است تا یک مربع را از طریق عنصر مسیر ترسیم کنیم:

<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="yellow" />

 

دستور Z, z Closepath

دوباره به مثال بالا توجه کنید که چطور برای بستن محیط مربع از دستور L استفاده کردیم تا خط آخر را رسم کنیم، البته می توانستیم از دستور V هم برای این کار استفاده کنیم اما در هر صورت مجبور هستیم تا مختصات نقطه نهایی که همان نقطه 10 و 10 است را بنویسیم.

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

و یا اگر بخوایم مثلثی بسازیم می توانیم به صورت زیر عمل کنیم:

<path d="M 10 10 H 90 V 90 z" fill="yellow" />

 

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

برای فهم بهتر موضوع مثال زیر که از دو دستور M استفاده کرده است و همچنین دارای دستور Z نیز هست را در قالب تصویر بررسی کنید:

دستورات منحنی

در SVG سه گروه دستور برای ساخت منحنی توسط عنصر مسیر وجود دارند که این گروه ها به شرح زیر می باشند:

• Cubic Bézier
• Quadratic Bézier
• Elliptical Arc

دستور C, c, S, s Cubic Bézier

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

اگر با ابزار Pen در نرم افزار Adobe Illustrator آشنا هستید با این روش رسم منحنی بیگانه نخواهید بود و می دانید که کار دو نقطه کنترل کننده، تعیین شیب آغاز و پایان منحنی می باشد.

در مثال زیر سینتکس این دستور را مشاهده می کنیم:

<path d='M 16 48 C 0 16 64 16 48 48' />

تصویر زیر این مثال را واضح تر نشان می دهد، منحنی آبی رنگ خروجی نهایی است:

همانطور که می توانید حدس بزنید دستور c همان دستور C است اما پارامترهای آن بصورت نسبی عمل می کنند در حالی که پارامترهای C اندازه دهی مطلق دارند.

 

See the Pen Interactive Cubic Bezier curve with SVG code by Hunor Marton Borbely (@HunorMarton) on CodePen.

 

دستور دومی که برای رسم منحنی وجود دارد دستور S است.

ما می توانیم چندین منحنی Bézier را به صورت دنباله دار در کنار هم داشته باشیم و معمولا در این مواقع دستگیره یک سمت منحنی انعکاس دستگیره سمت دیگر آن است تا شیب و انحنا بصورت متوازن بماند. برای راحتی این امر دستور S مورد استفاده می گیرد تا نیاز نباشد مختصات دستگیره منعکس شده را بنویسیم. در نتیجه دستور S فقط دو نقطه به عنوان پارامتر می پذیرد و نیازی به تعیین دستگیره اولی ندارد چرا که دستگیره اولی را همان نقطه انعکاسی دستگیره دوم منحنی قبلی که توسط دستور C یا S تعیین شده است در نظر می گیرد.

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

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

مثال زیر را بررسی کنید:

<path d='M 0 32 C 0 16 32 16 32 32 S 64 48 64 32' />

و بار دیگر همانطور که می دانیم s همان دستور S است اما نسخه نسبی آن در سیستم مختصات.

دستور Q, q, T, t Quadratic Bézier

دستور بعدی که می توان توسط آن منحنی رسم کرد Q می باشد. ساختار این دستور ساده تر از C است از آنجایی که فقط یک کنترل کننده دارد و آن کنترل کننده مسئول تنظیم انحنا برای هر دو نقطه آغاز و پایان منحنی می باشد.

در نتیجه دستور Q فقط دو نقطه به عنوان پارامتر می پذیرد، یک نقطه پایانی محنی و یک نقطه کنترل کننده برای هر دو نقطه آغاز و پایان منحنی.

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

<path d='M 0 32 Q 32 0 62 32' />

همانطور که دستور S دستور میانبر برای C بود، Q نیز دستور میانبر خود را دارد که با حرف T نمایش داده می شود.

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

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

<path d='M 0 32 Q 0 6 32 32 T 64 32' />

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

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

نسخه q و t نیز برای این دو دستور وجود دارند که همان نسخه نسبی می باشند.

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

دستور A, a Elliptical Arc

آخرین دستور برای رسم منحنی A می باشد که می توان توسط آن یک قوس یا کمان بیضوی بوجود آورد. یعنی خروجی نهایی بخشی از یک بیضی خواهد بود.

سینتکس مسیر برای این منحنی بصورت زیر می باشد:

<path d='M 0 0 A rx ry  x-axis-rotation  large-arc-flag  sweep-flag  x y' />

• نقطه اولیه منحنی توسط دستور قبل از A تعیین می شود
• x و y تعیین کننده نقطه نهایی منحنی هستند
• rx شعاع افقی بیضی است
• ry شعاع عمودی بیضی می باشد (واضح است که اگر دو شعاع با هم برابر باشند بجای بیضی، دایره خواهیم داشت)
• x-axis-rotation زاویه چرخش محور x بیضی است که در کل باعث چرخش کل بیضی می شود

برای دو مقدار دیگر یعنی large-arc-flag و sweep-flag به توضیح بیشتری نیاز داریم. وقتی برای دستور A مقادیر گفته شده در بالا را تعیین می کنیم چهار امکان برای کمان یا همان منحنی نهایی وجود دارد که در تصویر زیر هر چهارتا نمایش داده شده اند. در نهایت دو پارامتر large-arc-flag و sweep-flag تعیین کننده منحنی نهایی خواهند بود.

کمان قرمز رنگ منحنی نهایی می باشد.

زمانی که large-arc-flag را برابر با یک قرار دهیم کمان بزرگتر روی بیضی انتخاب می شود و وقتی آن را برابر با صفر در نظر می گیریم کمان کوچکتر انتخاب ما خواهد بود. همانطور که در تصویر بالا مشاهده می کنید دو گزینه پایین دارای مقدار یک برای این پارامتر هستند.

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

مثال

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

 

See the Pen Simple Path Examples by Mojtaba Seyedi (@seyedi) on CodePen.

ابزارهای تولید مسیر

برای بررسی و یادگیری بهتر دستورات می توانید از ابزارهای آنلاین زیر استفاده کنید:

• SVG Path Builder
• JXNBLK / PATHS
• cubic Bézier curve with SVG
• editor.method.ac
• SVG Path Visualizer
• SVG Path Editor

بیشتر بخوانید

• Paths on MDN
• The SVG path Syntax: An Illustrated Guide