رسم بیضی در 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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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>
- نوشته شده توسط احسان عباسی
- بازدید: 4783
