رسم یا مسیر در SVG

ایجاد یک رسم در SVG با استفاده از عنصر <path>

برای ایجاد یک رسم در SVG، از دستورات خلاصه ی زیر استفاده می شود:

• M  = برو به یک نقطه
• L  = خط رسم کن تا این نقطه
• H  = خط افقی رسم کن تا این نقطه
• V  = خط عمودی رسم کن تا این نقطه
• C  = رسم منحنی تا این نقطه
• S  = رسم منحنی صاف تا این نقطه
• Q  = رسم منحنی درجه 2
• T  = رسم منحنی درجه 2 صاف
• A  = کمان بیضوی
• Z  = بستن رسم

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

مثال 1

مثال زیر یک رسم را مشخص می کند که از نقطه ی (150,0) شروع می شود و سپس یک خط به نقطه ی (75,200) رسم می شود و سپس از آنجا، یک خط به نقطه ی (225,200) رسم می شود و در آخر مسیر بسته می شود و به نقطه ی (150,0) باز می گردیم:

کد SVG شکل بالا در زیر قرار دارد: 

مثال 2

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

در مثال زیر، یک منحنی درجه 2(سهمی) را ایجاد می کنیم به طوری که نقاط A و C به ترتیب نقاط شروع و پایان هستند و نقطه ی B، یک نقطه ی کنترل است:

کد SVG مثال بالا، در زیر قرار دارد:

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

• قبلی
• بعدی