آموزش SVG | قسمت چهارم | دایره و بیضی در SVG

آموزش SVG | قسمت چهارم | دایره و بیضی در SVGReviewed by رضا معظم on Jun 25Rating: 5.0آموزش SVG | قسمت چهارم | دایره و بیضی در SVGآموزش SVG | قسمت چهارم | دایره و بیضی در SVG

آموزش SVG | قسمت چهارم | دایره و بیضی در SVG

آموزش SVG | قسمت چهارم | دایره و بیضی در SVG

در قسمت چهارم از سری اموزش های SVG میخواهیم به شما شیوه رسم دایره و بیضی در SVG را به همراه سایر خصوصیات مورد نظر برای اینکار آموزش دهیم .

SVG Circle

دایره در SVG :

در SVG از عنصر <circle> برای رسم دایره استفاده میشود :

آموزش SVG | قسمت چهارم | دایره و بیضی در SVG

کد SVG شکل بالا:

راهنمای کدهای بالا:
خصوصیات cx و cy به ترتیب، مختصات x و y از مرکز دایره را مشخص می کنند. در صورتی که cx و cy مشخص نشوند، مرکز دایره به مختصات (0,0) در نظر گرفته خواهد شد.
خصوصیت r، شعاع دایره را مشخص می کند.

همیار پروژه

SVG Ellipse

بیضی در SVG :
در SVG از عنصر <ellipse> برای رسم بیضی استفاده میشود :
با استفاده از عنصر <ellipse> می توانید یک بیضی را ایجاد کنید.
یک بیضی کاملا شبیه یک دایره است اما با این تفاوت که یک بیضی دارای شعاع های x و y متفاوتی است ولی یک دایره دارای شعاع های x و y یکسان و مساوی است.
نکته: برای درک موضوع بالا، بهتر است بدانید که بیضی دارای دو شعاع متفاوت است. اما دایره تنها یک شعاع یکسان دارد.

همیار پروژه

مثال یک :
در این مثال یک بیضی را ایجاد می کنیم:

پیشنهاد ویژه :   پروژه مدیریت استخر به زبان VB.NET

آموزش SVG | قسمت چهارم | دایره و بیضی در SVGکد SVG شکل بالا:

راهنمای کدهای بالا:
خصوصیت cx، مختصات x از مرکز بیضی را مشخص می کند.
خصوصیت cy، مختصات y از مرکز بیضی را مشخص می کند.
خصوصیت rx، شعاع افقی بیضی را مشخص می کند.
خصوصیت ry، شعاع عمودی بیضی را مشخص می کند.

همیار پروژه

مثال دو :
در این مثال، سه بیضی را بر روی یکدیگر ایجاد می کنیم:

آموزش SVG | قسمت چهارم | دایره و بیضی در SVGکد SVG شکل بالا:

همیار پروژه

مثال سه :
در مثال پیش رو، دو بیضی را ایجاد می کنیم( یکی به رنگ زرد و یکی ب رنگ سفید):

آموزش SVG | قسمت چهارم | دایره و بیضی در SVGکد SVG شکل بالا:

منبع : www.w3schools.com

همیار پروژه SVG

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