ما بررسی کرده ایم که SVG ها و عناصر اساسی ترسیم چیست. اما بیشتر تصاویر فراتر از خطوط ، مستطیل ها و بیضی های ساده حرکت می کنند و این زمانی است که دانستن نحوه ایجاد مسیرهای پیچیده در SVG اهمیت پیدا می کند.
SVG path عنصر بسیار پیشرفته تر است می توان ادعا کرد که این تنها عنصری است که شما همیشه به آن احتیاج دارید زیرا می تواند هر شکلی را که می خواهید ترسیم کند. با این حال ، یک اشکال وجود دارد که بهتر است با یک مثال نشان داده شود:
<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />
به نظر پیچیده است و پیگیری آن دشوار است.
عنصر مسیر به یک واحد نیاز دارد d ویژگی با مقدار رشته شامل لیستی از دستورالعمل های رمزگذاری شده کدگذاری شده است. به اندازه یک عبارت منظم پیچیده نیست ، اما گم شدن در جنگل تعداد آسان است.
رشته نقاشی با استفاده از یک سری دستورات مشخص شده با یک حرف بزرگ یا کوچک تشکیل می شود. این حرف با استدلال های صفر یا بیشتر دنبال می شود که برای آن دستور خاص اعمال می شود. به عنوان مثال ، در مسیر زیر از an استفاده می شود M دستور حرکت دادن قلم SVG بدون شروع خط کشیدن به نقطه شروع 5000000:
<path d="M500,500" />
SVG viewBox ویژگی موقعیت قلم را در خود تصویر تحت تأثیر قرار می دهد. با استفاده از 500,500 به عنوان مثال بالا ، قلم به شرح زیر است:
- هنگام استفاده SVG به صورت افقی و عمودی متمرکز می شوند
viewBox="0 0 1000 1000" - موقعی که در بالا سمت چپ قرار دارد
viewBox="500 500 1000 1000" - وقتی که در پایین سمت راست قرار می گیرد
viewBox="-500 -500 1000 1000" - در خارج از منطقه قابل مشاهده است
viewBox="0 0 400 400".
به همین ترتیب ، یک حرف کوچک m قلم را نسبت به مکان فعلی خود حرکت می دهد – به عنوان مثال ، 50 واحدهای باقی مانده و 100 واحد بالا:
<path d="m50,-100" />
رسم خطوط مشابه است: L برای مختصات مطلق خط می کشد ، و l (حروف کوچک L) نسبت به مکان فعلی یک خط می کشد. مسیرهای زیر یکسان هستند:
<path d="M500,500 L100,600" />
<path d="M500,500 l-400,100" />
H و h خطوط افقی را به سمت مطلق یا نسبی بکشید x مکان بر این اساس. مثلا:
<path d="M500,500 H800" />
<path d="M500,500 h300" />
اگر می توانید چه چیزی را حدس بزنید امتیاز اضافی می دهد V و v انجام دادن …
<path d="M500,500 V400" />
<path d="M500,500 v-100" />
سرانجام، Z یا z با کشیدن خطی از نقطه فعلی تا نقطه شروع مسیر را ببندید. به طور معمول ، Z آخرین دستور در رشته شما خواهد بود ، اگرچه ایجاد رشته هایی با چندین مسیر فرعی امکان پذیر است. مثلا:
<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />
نتیجه در زیر نشان داده شده است.
مسیرهای SVG با CSS می توانند سبک شوند یا می توانید اضافه کنید stroke، stroke-width، fill و سایر خصوصیات در صورت لزوم.
این گزینه های مسیر آسان است. اکنون کاملاً بی حس و ذهن پیچیده می شود. در نظر بگیرید A/a دستور ، که یک قوس (بخش) از بیضی را با پارامترهای زیر ترسیم می کند:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
در این مثال:
rxشعاع x بیضی استryشعاع بیضی y استx-axis-rotationتعداد درجه چرخش بیضی استlarge-arc-flagاست0برای کوچکترین قوس یا1برای بزرگترینsweep-flagاست0برای زوایای مثبت یا1برای منفی (بالای یا زیر خط)x yنقطه انتهای قوس است
تجسم قوس ممکن است دشوار باشد ، اما این ابزار قوس Codepen کمک خواهد کرد.
با این حال ، استفاده از کمان ها محدود است ، بنابراین مسیرهای SVG نیز ارائه می دهند:
