عنصر مسیر در svg

عنصر 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 در SVG
استفاده از دستور L در SVG

 

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


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

 

استفاده از دستور l
استفاده از دستور l

 

نکته مهم

اگر برای دستور 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 نیز هست را در قالب تصویر بررسی کنید:

استفاده از دستور Z در عنصر Path در SVG

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

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

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

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

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

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

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


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

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

دستور C در عنصر path
همانطور که می توانید حدس بزنید دستور 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 در عنصر مسیر در SVG
همانطور که در تصویر نشان داده شده است انحنای دوم توسط دستور S بوجود آمده است. نقطه سبز رنگ همان دستگیره فرضی است که انعکاس دستگیره دوم انحنای اول است که توسط دستور C ترسیم شده است.

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


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

دستور S برای ویژگی d در عنصر path یا مسیر در SVG برای ترسیم منحنی
و بار دیگر همانطور که می دانیم s همان دستور S است اما نسخه نسبی آن در سیستم مختصات.

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

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

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

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

دستور Q در عنصر مسیر SVG


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

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

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

دستور T در SVG برای عنصر path و ویژگی d
مثال زیر را در نظر بگیرد و نتیجه را بررسی کنید:


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

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

ساخت منحنی با دستور Q و T

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

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

دستور 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 تعیین کننده منحنی نهایی خواهند بود.

دستور A برای رسم منحنی در SVG
کمان قرمز رنگ منحنی نهایی می باشد.

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

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

مثال

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

 

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

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

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

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

8 دیدگاه برای “عنصر Path یا مسیر در SVG

  1. آقای سیدی موقعی پیش میاد که من دستی خودم تغییر بدم؟ چون من تغییر کوچیک هم بخوام بدم میرم توی نرم افزار گرافیکیم از طریق ادیتور رو پیشنهاد میکنید؟

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

  2. سلام
    وقتتون بخیر
    مشکل من توی استفاده از prism هست.
    مشکل اینجاست که وقتی مثلا کد زیر

    به آدرس من در فیسبوک سر بزنید

    قرار میدم به صورت رنگی در نمیاد و سیاه و سفید هست!!!
    ولی وقتی به صورت

    <p>به آدرس من در<a href="http://facebook.com/mohsen">فیسبوک</a> سر بزنید</p>

    قرار میدم درست میشه!!!
    مشکل از کجاست؟؟
    چیکار باید کرد؟
    و سوال آخر من اینکه شما هم که از prism استفاده می کنید، اون قسمت بالای سمت چپ کد ها که اسم زبون مورد نظر نمایش میده که به برای سی اس اس به رنگ سبز و برای اچ تی ام ال به رنگ نارنجی هست از کدوم از پلاگین های prism استفاده کردید؟؟
    منتظر پاسخ شما هستم
    با تشکر از شما.

  3. سلام
    مشکل اصلی ای که من برای استفاده از svg بهش برخوردم ، بحث ریسپانسیوه …
    وقتی برای تگ svg یا تگهای path و … عرض و ارتفاع ثابت در نظر میگیریم ، چطور میشه ریسپانسیو رو کنترل کرد و svg رو واکنش گرا کرد؟؟

    با تشکر

  4. سلام خسته نباشید من میخاستم در یک پاراگراف بین چند کلمه یک فلش کشیده بشه آیا میشه بدون استفاده از اندازه با استفاده از selector این کار ار انجام داد

  5. سلام سید جااااااان، خداقوت! یه مدته کمکار شدیا، هی میام چیز جدیدی توی سایت نیست
    لابد سرت شلوغه و گرم کاری و خدارو شکر ولی فکر ما هم باش دست ما رو هم بگیر

    این کلمه ی “هینطور ” هم درستش کنید توی همین پیج ! گفتم که بدونی با دقت میخونم هه هه
    بعدم اینکه با اجازتون مقاله BEM رو توی کانالم استفاده کردم ولی منبع رو زیرش نوشتم اگه بازم میگید مشکل داره برش دارم و فقط لینک سایتو بزنم بگم خودشون بیان بخونن.
    و دیگه اینکه خیلی میخواااامت سید، بازم برامون آموزش بذار این فلکس باکس که اصن هیچی مشتی و درست حسابی بود کلی به دادم رسید
    یعنی خیلی موجود خوبیه این فلکس اصن از خیلی از آدما بیشتر میفهمه هه هه، هرچی داره بازی در میاره بهش میگی فلکس شو آدم میشه و درست میشینه سر جاش هه هه
    این گرید هم اگه آموزشش رو بذاری اولین نفری که میخره خودمم!
    متریال دیزاین، طراحی قالب وردپرس…
    اینا رو هم به فکرش باش دعات میکنیم
    و باز هم دمت گرم، ایشالا باشی و هی ما ازت چیز یاد بگیریم و شاگردی کنیم سید جان ایشالا جدت نگهدارت باشه
    برات آرزوی موفقیت روز افزون دارم.

    1. فک کنم فامیلیتون رو با سید مجتبی قاطی کردم و سید نباشین هه هه ولی بازم جد سیدا نگهدارت باشه :)

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *