آموزش SVG | قسمت پنجم | خط و چند ضلعی در SVG

آموزش SVG | قسمت پنجم | خط و چند ضلعی در SVGReviewed by همیار پروژه on Jul 4Rating: 5.0آموزش SVG | قسمت پنجم | خط و چند ضلعی در SVGآموزش SVG | قسمت پنجم | خط و چند ضلعی در SVG

آموزش SVG | قسمت پنجم | خط و چند ضلعی در SVG

آموزش SVG | قسمت پنجم | خط و چند ضلعی در SVG

با آموزش رسم خط و چند ضلعی در SVG در خدمت شما کاربران و بازدید کنندگان گرامی سایت همیار پروژه هستیم.در SVG برای اینکه بخواهیم یک خط یا همون Line رسم کنیم باید از عنصر <line> استفاده کنیم همچنین برای رسم چند ضلعی ( Polygon ) نیز باید از عنصر <polygon> استفاده کنیم با ما در ادامه همراه باشید تا با رسم این اشکال در SVG آشنا شوید.

SVG Line

خط در SVG :

استفاده از عنصر <line> برای رسم خط در SVG :
از عنصر <line> برای ایجاد یک خط، استفاده می شود:

خط و چند ضلعی در SVG

کد SVG شکل بالا:

راهنمای کدهای بالا:

خصوصیت x1، مختصات x نقطه ی شروع را مشخص می کند.
خصوصیت y1، مختصات y نقطه ی شروع را مشخص می کند.
خصوصیت x2، مختصات x از نقطه ی انتها را مشخص می کند.
خصوصیت y2، مختصات y از نقطه ی انتها را مشخص می کند.
سایر خصوصیات در آموزش های قبلی توضیح داده شده اند.

همیار پروژه

SVG Polygon

چند ضلعی در SVG :

استفاده از عنصر <polygon> برای رسم چند ضلعی در SVG :
از عنصر <line> برای ایجاد یک خط، استفاده می شود:

از عنصر <polygon> برای انجام گرافیک هایی استفاده می شود که حداقل شامل 3 ضلع باشند.
چند ضلعی ها از خط های راست ایجاد می شوند و شکل ایجاد شده همواره “بسته” است( یعنی خطوط به یکدیگر متصل اند).
عبارت polygon یک کلمه ی یونانی است. poly به معنی تعدادی، است. و gon به معنی زاویه(ضلع) است.

پیشنهاد ویژه :   آموزش SVG | قسمت سوم | مستطیل در SVG

 

مثال یک :

در مثال زیر، یک چندضلعی که دارای سه ضلع است را ایجاد کرده ایم:

خط و چند ضلعی در SVG

کد SVG شکل بالا:

راهنمای کدهای بالا:

در داخل خصوصیت points، مختصات x و y از هر رأس چند ضلعی را قرار داده ایم.

 

مثال دو :

در مثال زیر، یک چندضلعی که دارای چهار ضلع است را ایجاد کرده ایم:

خط و چند ضلعی در SVG

کد SVG شکل بالا:

 

مثال سه :

در مثال زیر با استفاده از عنصر <polygon> یک ستاره را ایجاد کرده ایم:

خط و چند ضلعی در SVG

کد SVG شکل بالا:

 

مثال چهار :

تغییر مقدار خصوصیت fill-rule به evenodd:

خط و چند ضلعی در SVG

کد SVG شکل بالا:

منبع : www.w3schools.com

همیار پروژه SVG

دیدگاه خود را بیان کنید