سبد (0)

رسم بیضی در SVG

رسم بیضی در SVG با استفاده از عنصر <ellipse>

با استفاده از عنصر <ellipse> می توانید یک بیضی را ایجاد کنید. 

یک بیضی کاملا شبیه یک دایره است اما با این تفاوت که یک بیضی دارای شعاع های x و y متفاوتی است ولی یک دایره دارای شعاع های x و y یکسان و مساوی است. 

نکته: برای درک موضوع بالا، بهتر بدانید که بیضی دارای دو شعاع متفاوت است. اما دایره تنها یک شعاع یکسان دارد. 


مثال 1

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

کد SVG شکل بالا را در زیر مشاهده می کنید:

مثال

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" /
>

</svg>
خودتان امتحان کنید »

توضیح کد بالا:

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

مثال 2

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

 

کد SVG بیضی های بالا، را می توانید در زیر مشاهده کنید:

مثال

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
خودتان امتحان کنید »

مثال 3

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

 

در زیر کد SVG مورد نظر قرار دارد:

مثال

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان