SVG <ellipse>

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" />

亲自试一试

కోడ్ వివరణం:

• 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" />

亲自试一试

ఉదాహరణ 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" />

亲自试一试